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!

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 Layout Basics Controlling Layout with CSS Display Modes Using Inline-Block to Set Width, Height, Top and Bottom Margin and Padding

when your designing the layout of webpage do you start styling everything for a mobile screen first ?

Or add the media query for that afterward?

2 Answers

It's good practice (or so I've been told) to add a max-width at some point so your content doesn't get stretched too far in wide screens. You can do this in CSS rather than as a media query by adding a max-width to your container-div's, like max-width: 1150px. You can also have a media query where you have a min-width and a max-width if you want to be specific about a certain sized screen.


When you want to design with a mobile-first approach or responsive design then yes, you want to do your base styles for a mobile device and then add media queries to fit all kinds of screens, using min-width for various breakpoints.

So, when will you add the max-width?