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 Unused CSS Stages Media Queries Media Features and Media Types

Fedor Andreev
Fedor Andreev
6,438 Points
Posted by Fedor Andreev
Fedor Andreev
6,438 Points

Code won't pass what am I doing wrong?

Next, create a new media query that sets the body element's background color to #4682B4 if the viewport width is 480px or less.

/* Complete the challenge by writing CSS below */ @media screen and (max-width: 768px) and (min-width: 481px) { body { background: #FF6347; color: #FFF;

}

@media screen and (max-width: 480px) { body { background-color: #4682B4; }

}

James Maddox
James Maddox
17,154 Points

I think it should go as follows... @media screen and (min-width: 480px) { body { background: #4682B4; }

3 Answers

Jennifer Rai
PLUS
Jennifer Rai
Courses Plus Student 13,164 Points
Jennifer Rai
Jennifer Rai
Courses Plus Student 13,164 Points

Hi Fedor,

It isn't passing because you are missing the first media query's closing curly brace. You have this:

@media screen and (max-width: 768px) and (min-width: 481px) { 
body { 
background: #FF6347; color: #FFF;
}
// you forgot to close the brace here.

@media screen and (max-width: 480px) { 
body {
 background-color: #4682B4;
 }
}

And it needs to be like this:

@media screen and (max-width: 768px) { 
  body { 
    background-color: #FF6347; 
    color: #fff;
  }
}

@media screen and (max-width: 480px) { 
  body { 
    background: #4682B4; 
  } 
}
Ruben Leija
Ruben Leija
4,051 Points
Ruben Leija
Ruben Leija
4,051 Points

write ' only ' after media. on the first media query remove the ' and (min-width: 481px) '

James Maddox
James Maddox
17,154 Points
James Maddox
James Maddox
17,154 Points

Sorry for the mistake after working the problem out here's the correct answer. @media only screen and (max-width: 480px) { body { background: #4682B4; } }