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 Enhancing Design with CSS Styling Text Text Shadows

Posted by Victor Reynaga
Victor Reynaga
5,054 Points

Designing the mobile version without setting media query.

Is there a reason why he is designing the mobile version without placing a @media screen (300px) or whatever he wants to design for. I notice that he is making changes to the mobile version but is making the changes in the base style..why not set a media query so your changes dont affect the desktop version?

1 Answer

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there, Victor Reynaga! The point of "mobile-first" development is that the base CSS is to determine what looks good on a mobile device... specifically a phone. There was a time when most of web browsing was done with a desktop computer. These days, though, mobile device web browsing is up around the 50% mark. And somewhere in between, it got up to around 75% making browsing on a phone the most popular way to surf the web and visit websites. This lead to the advent of "mobile-first" development.

The media queries should be there to tell it what happens when it's not a phone. For example, when it gets to the point of a tablet such as an iPad. And then yet another breakpoint for desktop/laptop use.

Hope this helps! :sparkles:

Victor Reynaga
Victor Reynaga
5,054 Points

Yes this helps thank you. So I should build the mobile site version with base css, then use media queries for the bigger screens (ipad, desktop)?

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Victor Reynaga Yes! That's exactly it! That is true "mobile first" development. The base should be determining what it looks like on a mobile phone. The media queries are for anything larger :smiley: