Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Basics (2014) Basic Layout box-sizing and max-width

Chenglu Li
Chenglu Li
1,380 Points
Posted by Chenglu Li
Chenglu Li
1,380 Points

How to set up text to be responsive (sample project in CSS Basics)

In the CSS Basics module's basic layout class. I tried to modify the sample project to make the H1 in <header> responsive as I shrink the window but failed.

I thought if I set the h1 as this: h1 { max-width: 100%; }

then it would work. but it did not. I wonder how I should set the h1 element to make it responsive? Thank you so much!

lucybeck
lucybeck
6,055 Points

Hi, Instead of max-width: 100%; Try max-width: auto;

Here's why: http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/

2 Answers

Aaron Wuerch
Aaron Wuerch
7,024 Points
Aaron Wuerch
Aaron Wuerch
7,024 Points

Hi there,

people correct me if I am wrong here as I am also a CSS learner.

However to make the h1 heading shrink as the browser gets smaller, is that you need to use media queries and manually set the new h1 font size for each one.

example:

@media (min-width: 768px) {
  h1 {
     font-size: whatever size you want it;
  }
}

maybe there is a simpler way using ems/rems? or max-width: auto?

Hope this helps.

Aaron Loften
Aaron Loften
12,464 Points
Aaron Loften
Aaron Loften
12,464 Points

Hey Chenglue,

Im not quite sure what you want to do, but it kinda sounds like you want to allow the text to wrap when the page gets smaller. Is this correct?

If so, it should already be setup to do that when you load the workspace. The "max-width" property should only be should only be applied if the width of the element is set and responsive, or if the width of the element is naturally larger than you would like(eg: <h1> ThisIsAReallyLongPieceOfTextAndWillNotWrapProperlyDueToTheSizeOfTheWord </h1>). In that example, there may be unexpected results, and setting a max-width would be the first step to stopping the unexpected results, however, the h1 should have been responsive by default.

The goal of a max-width is to prevent an element from growing too large and having an undesirable display.

If you are trying to make breakpoints(set what happens when a screen/viewport is a certain size), you should look at Aaron Wuerch's comment or https://teamtreehouse.com/library/css-basics/designing-with-the-latest-features/media-queries

If you are setting a breakpoint, you should focus on the size of the viewport, rather than the size of the h1's parent. It'll help you more properly plan for specific sizing based on device.

I could be wrong, I hope that helps.