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 Basics (2014) Enhancing the Design With CSS Media Query Basics

Posted by ja5on
ja5on
10,338 Points

Dark red doesnt work (same as other here) simply doesnt work

?

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

Please show your code (be sure to format it properly).
Even better, make a snapshot of your workspace and post the link to it here.

Favour Uche
Favour Uche
3,551 Points

try changing your max-width to 580px instead

3 Answers

ja5on
ja5on
10,338 Points

I'm not sure how to snapshot? I found out that my browser wouldnt shrink beyond a certain point and this caused @media unable to apply its styles, i think it was to do with the amount of pages open (they are not open as new pages but together as tabs) if that makes sense.

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

The colored word in my original comment is a link that will take you to a video explaining how to make and share shapshots.

Anton Steenhoudt
Anton Steenhoudt
9,235 Points
Anton Steenhoudt
Anton Steenhoudt
9,235 Points

What helped me is opening the devtools. I did it by change but it showed me the right color(darkred).

tomaszfurmanczyk
seal-mask
.a{fill-rule:evenodd;}techdegree
tomaszfurmanczyk
Full Stack JavaScript Techdegree Student 18,242 Points
tomaszfurmanczyk
.a{fill-rule:evenodd;}techdegree
tomaszfurmanczyk
Full Stack JavaScript Techdegree Student 18,242 Points

if using a chrome browser please right click > select inspect element > then click the 3 vertical dots > after which will show you options for dock settings to the left, right or bottom of webpage.

Select either one and your will be able to automatically see the screen size change as you expand or contract the webpage.

This will allow for you to establish that the media query for 480px max width actually works within the chrome browser

@media (max-width: 480px){ body{background:darkred;} }