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

Posted by Peaches Stubbs
Peaches Stubbs
21,320 Points

Media queries question.

Hi everybody I am having some problems with a media query challenge and I cannot see what i am doing wrong.

The question is : Create a breakpoint for devices 480 pixels wide or larger. Inside the breakpoint, set the body background to the color navy.

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

It was not accepted I also tried:

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

It kept asking if I had set the background color to navy. I am sure that it is something simple may someone show me where I have gone wrong please. Thanks in advance.

11 Answers

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

You do not have a : between your min-width and the value. It should read min-width: 480px

Joel Rivera
Joel Rivera
29,401 Points
Joel Rivera
Joel Rivera
29,401 Points

It should look like this

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

Note the : colon after min-width and the opening { after the parenthesis .

Peaches Stubbs
Peaches Stubbs
21,320 Points
Peaches Stubbs
Peaches Stubbs
21,320 Points

Thanks for the answers guys and actually everything that both of you suggested I have done in the past. I tried both of you'll suggestions even copying and pasting and I get the same thing. I'm wondering if there is just something wrong with this code challenge !

Joel Rivera
Joel Rivera
29,401 Points
Joel Rivera
Joel Rivera
29,401 Points

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

Try the short hand version of background-color which is just background. Sometimes the challenge wants it done a specific way.

Peaches Stubbs
Peaches Stubbs
21,320 Points
Peaches Stubbs
Peaches Stubbs
21,320 Points

I did try that but, I will try it again. :( that did not work! but thank U !

Joel Rivera
Joel Rivera
29,401 Points
Joel Rivera
Joel Rivera
29,401 Points

put the link to the challenge here so I can check it out. Thanks.

Peaches Stubbs
Peaches Stubbs
21,320 Points
Peaches Stubbs
Peaches Stubbs
21,320 Points

Here it is: http://teamtreehouse.com/library/write-css-media-queries

Joel Rivera
Joel Rivera
29,401 Points
Joel Rivera
Joel Rivera
29,401 Points

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

This code worked. Just don't put screen. It wasn't asking for that.
Joel Rivera
Joel Rivera
29,401 Points
Joel Rivera
Joel Rivera
29,401 Points

Did that work for you?

Peaches Stubbs
Peaches Stubbs
21,320 Points
Peaches Stubbs
Peaches Stubbs
21,320 Points

Nope it didn't I did add screen I added and to. @media screen and(min-width:480px) { body { background: navy; } }

Joel Rivera
Joel Rivera
29,401 Points
Joel Rivera
Joel Rivera
29,401 Points

Look at the code I gave you earlier. The last one. That worked for me. Notice I didn't put the AND.

The and is not requested and some of the challenges want the answer to be a specific way.