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
Agustin Hernandez
2,747 PointsWhy Did We Add 1000px
I don't get why Guil added max-width: 1000px to our container when we had already set the width to 70%
David Nuanez
3,066 PointsWe set the width to 70% so that the styling would look good on smaller to medium sized devices, but we set a max width of 1000px so that on large to extra large screens the text doesn't get unnecessarily wide.
Without a max width, the text would spread one sentence across the entire screen as opposed to wrapping it to the next line, which is not only easier to read/easier on the eyes, but looks better design-wise as well.
André Lança
3,137 PointsIn summary, they are setting 1000px as max. And that container will not increase more than 1000px, no mather the size of the screen. But will decrease. And to be responsive, they are adding 70%, to be 70% of screen in all screens lower than 1000px. Screens higher than 1000px will maintain the size.
3 Answers
Steven Parker
231,236 PointsAs the other commentators have pointed out, the 70% setting allows the width to grow and shrink with the window size. But the "max-width" setting establishes a maximum size that the growing is allowed to reach.
So on any window that is 1428 pixels wide or more, the element with these settings will be 1000 pixels wide and will not grow any more.
Agustin Hernandez
2,747 PointsThanks to everyone who helped me understand the purpose for adding 1000px
Robert O'Toole
6,366 Pointsbut in most cases wouldn't we just add another media query to get the same desired effect as we would with setting max-width?
in other words couldn't we just set another media query with (min-width:1000px) or (min-width:1024px) for larger monitors to prevent this from happening. media queries can be confusing because of this... they almost have a cascading effect that can override things if u arent careful it seems
Steven Parker
231,236 PointsYou might do that if you considered it important to accommodate folks with unusually large screens. Making a special effort for screens that large would not be typically done, particularly if the main focus was mobile devices.
Nick Renteria
10,258 PointsNick Renteria
10,258 PointsHi! It's been a little bit since I took that particular course, but I think the basic idea behind adding a max-width property is to keep the element from getting too wide (and thus potentially harder to read) on bigger screens. For example, I have a MS Surface with a pretty small screen, so an element that stretches across 70% of my viewing window is easy enough for me to read. But say I hooked a computer up to a huge 30in. monitor; an element (especially one with a lot of text in it) stretched across 70% of that screen would have its lines of text become so long that they might be hard to read, especially for users with poorer eyesight. Hope this helps!