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 How to Make a Website Responsive Web Design and Testing Write CSS Media Queries

Saad Khan Malik
Saad Khan Malik
25,199 Points

Create a breakpoint for devices 480 pixels wide or larger.

Q1) Create a breakpoint for devices 480 pixels wide or larger. Inside the breakpoint, set the body background to the color navy.

it takes this as the correct ans(which i feel is wrong.... as its missing a curly-bracket at the end )

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

should it not be this?

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

Q2) After the first breakpoint, create a second breakpoint for devices 660 pixels wide or larger. Inside the breakpoint, set the body background to the color darkgreen.

this should be correct right?... cuz i get reverted back to Q1

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

any help will be much appreciated...

16 Answers

Matthew Bingham
Matthew Bingham
11,927 Points

Mine passes ok:

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

Just found that adding a forth closing curly bracket for both questions allows you to pass

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

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

yes this one worked for me to eventhough it was really annoting to spend a lot of time finding out how to complete the challenge

It's broken! Should notify the treehouse staff!

Hi all here. The reason that the Code Challenge passes without closing the media query's (MQ) final curly brace is because it is technically acceptable, just not semantically correct. Because the MQ is the final bit of CSS there, there's nothing below it to override the width you're targeting with the MQ. This is similar to what you'd see in the real world when not closing your final brace. Of course, if you had another MQ (or other CSS) below the MQ without the closing brace, it would break because anything beyond that would be ignored.

this helped me a lot i was not including the first clossing curly brace

So I went to the code challenge and for your first question: it accepts my closing curly brace. Are you sure you typed it right?

For the second question: Did you keep the first media query when you typed the second one? Again, when I typed your code it said I was right.

Saad Khan Malik
Saad Khan Malik
25,199 Points

i just tried my code... and turns out i was right... it may have been a glitch at the time... thanks for the support!

^^^^ Wendel is right, I passed the first Q fine with the syntax listed from the first post but the second Q failed after I tried numerous times to refresh. The preview was showing I had the right syntax as well, so there is a bug some where. Also I could not get my workspace to respond to the background change even though I am confident I had the right code. Hopefully the problem is fixed soon.

lyonel scapino
lyonel scapino
14,191 Points

there s still a bug on that allowing to not close the braces.

Julian Glover
Julian Glover
2,578 Points

Although the tutorial passes the code @media screen and (min-width: 660px) { body { background: navy; } }

For the code challenge, you must instead use the element "background-color" instead of "background" so it reads:

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

same someone inform NICK Petit

Not sure if this is still an issue, but I just took this code challenge and passed with this:

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

Berline Patience
Berline Patience
2,525 Points

I have this problem, I do not know what I am doing wrong. here's my code and yet I still am not able to pass.

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

Betsy Lambright
Betsy Lambright
983 Points

Still having a problem with this

Still broken... But thank you

Ah! The semicolon after 480px should be removed! I took out the semicolon before the closing parenthesis and it worked!

correct code

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

Check your background color :) It says set it to darkgreen yet it appears you put navy.

Saad Khan Malik
Saad Khan Malik
25,199 Points

whoops!.. but that was a typo here... not in the actual code-challenge...