CSS CSS Layout Basics Getting Started with CSS Layout Using a Mobile First Approach

Agustin Hernandez
Agustin Hernandez
1,795 Points

Why 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%

Nick Renteria
Nick Renteria
10,258 Points

Hi! 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!

David Nuanez
David Nuanez
3,066 Points

We 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.

In 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.

2 Answers

Steven Parker
Steven Parker
155,830 Points

As 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
Agustin Hernandez
1,795 Points

Thanks to everyone who helped me understand the purpose for adding 1000px