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

Posted by Caroline Louw
Caroline Louw
12,155 Points

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

Bert Witzel
.a{fill-rule:evenodd;}techdegree seal-36
Bert Witzel
Full Stack JavaScript Techdegree Graduate 27,917 Points

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.

Caroline Louw
Caroline Louw
12,155 Points

thanks

Bert Witzel
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Bert Witzel
Full Stack JavaScript Techdegree Graduate 27,917 Points
Bert Witzel
.a{fill-rule:evenodd;}techdegree seal-36
Bert Witzel
Full Stack JavaScript Techdegree Graduate 27,917 Points

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.

Caroline Louw
Caroline Louw
12,155 Points

So, when will you add the max-width?