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 Mobile-First CSS Layout Mobile-First CSS Layout Using a Mobile First Approach

Posted by Nas Jones
Nas Jones
7,849 Points

Media query

I'm confused, why did he take out of properties from the class container and place it in a media query? I know he said on other devices the width would be too narrow, but then what happens to regular desktops?. Wasn't the goal to center and narrow the content? If you're only doing that for other devices what's the point of doing it regularly?.

Ryan Miller
Ryan Miller
9,069 Points

Hello,

If you supply the code that was used it is easier to see why it was done. Media queries are normally used as an exception - if size exceeds 780px make height 100% for example. If styling was done in a class container it should still be there and the exceptions placed in the media query for something like mobile device viewing or whatever the circumstances are in your code.

3 Answers

Jason Rich
seal-mask
.a{fill-rule:evenodd;}techdegree
Jason Rich
Front End Web Development Techdegree Student 10,048 Points
Jason Rich
.a{fill-rule:evenodd;}techdegree
Jason Rich
Front End Web Development Techdegree Student 10,048 Points

Why is that? why shouldn't it be the other way around?

According to one of the resources in the Teacher's Notes: Brad Frost - Mobile First Responsive Web Design:

Why start here and not the desktop? The mobile web is far more restrictive, eclectic and unstable than other contexts. The mobile context is hazy. Is the user on the go or on the couch? Are they on WiFi or EDGE? By first creating an experience that prioritizes a worst-case mobile scenario, you ensure that your users will be able to accomplish their goals despite a lot of factors working against them. In short, if you can support the mobile web, you can support anything.

Scaling up from the mobile context versus scaling down from the desktop context ensures that your message, content and functionality remain intact as the screen real estate and connection speed increase. Scaling down runs the risk of your core message and functionality getting lost by the time you squish it all the way down to the mobile context.

Nas Jones
Nas Jones
7,849 Points

I see, thanks for the help!

Nas Jones
Nas Jones
7,849 Points
Nas Jones
Nas Jones
7,849 Points

Hello thank you for responding. Around the 3:00 mark of the video he removes the content from the container class and places it in the media query. I'm still trying to understand it, my hypothesis is that he's doing that because he only wants to apply those things for the media query anything outside that media query is a base style which applies to any device, am i correct?. I just want to be sure of his reasoning.

Ryan Miller
Ryan Miller
9,069 Points
Ryan Miller
Ryan Miller
9,069 Points

Hey that is correct. The information is removed at that point because he is happy with the styling already applied. He only wants a change to this styling if the circumstances are met as set in the media query.

Nas Jones
Nas Jones
7,849 Points

I see, so just double checking a mobile first approach would be the base styles targeted for mobile devices then add media queries for larger devices. Why is that? why shouldn't it be the other way around?