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

General Discussion

@media stuck

      <meta charset="utf-8">
      <title>Francisco Sandoval | designer</title> 
      <link rel="stylesheet" href="css/normalize.css">
      <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
      <link rel="stylesheet" href="css/main.css">
      <link rel="stylesheet" href="css/responsive.css">


@media screen and (min-width: 480px) {
  body  { background:navy;}```
my background doesn't change color with screen change.
Help please.

take out the hyphens

@media screen and (min-width: 480px) { body { background:navy;} }

9 Answers

Do you have that media query in your css file?

Yes in the new file responsive.css

Do you have any rules earlier in that file or in the "main.css" file that set the body background color?

If you have a selector with higher specificity further up then that could be the reason you don't see the change.

If you have something like this

html body {
  background: green;

@media screen and (min-width: 480px) {
  body {

then you'll never see the navy color.

Joshua, which hyphen? min-width: 480px? No it doesn't work. Jason, I following Nick pettit as he does it, thus I believe so, I will check.


Joshua might have meant the backtick? You have 3 backticks in your media query. Was this a code posting error or do you really have them in your css?

Maybe tell us what background color you see at a wide screen resolution and what you see when below 480px.

Do you have this on workspaces and is there a link where we can preview or do you have this live somewhere? It would be easier to track down the problem.

main.css had


I removed it and it didn't make a difference, so I went back and re entered it.

In that case it would be fine because both use the same selector body So the styles that appear farther down will take effect.

My only suggestion is to tell us what colors you see below 480 and above or put this up on workspaces assuming we can view it. I haven't used it yet so I don't know.

I made a codepen demo which I think has the css you've shown so far and it seems to be working. I see the white background when my browser width is below 480px


I get an error that the page doesn't exist.

I don't know how to let you access my workspace. I only see white background at any size. I guess I will just continue on like this for now. Thank you

I got it, my responsive.css file wan't in my CSS folder. Thank you guys.

Completely forgot about that. Glad you got it working.

Thanks for posting your resolution for this issue. I have been racking my brain for two weeks (not constantly) trying to figure out why my media queries wouldn't work.