CSS Enhancing Design with CSS Styling Text Text Shadows

Victor Reynaga
Victor Reynaga
3,505 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

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
3,505 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

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: