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
Saad Khan Malik
25,199 PointsCreate 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
11,927 PointsMine passes ok:
@media screen
and (min-width : 480px)
{
body {background-color: navy;}
}
caleb kimbley
3,476 PointsIt's Broken
Betsy Lambright
983 PointsJust 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; } }
Coen van Campenhout
5,034 Pointsyes this one worked for me to eventhough it was really annoting to spend a lot of time finding out how to complete the challenge
Wendel Ferreira
4,258 PointsIt's broken! Should notify the treehouse staff!
Scott Magdalein
1,667 PointsHi 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.
MUZ140699 Wellington Mugombi
5,016 Pointsthis helped me a lot i was not including the first clossing curly brace
Alyssa Gowan
46,260 PointsSo 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
25,199 Pointsi just tried my code... and turns out i was right... it may have been a glitch at the time... thanks for the support!
Luca Terrigno
4,103 Points^^^^ 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
14,191 Pointsthere s still a bug on that allowing to not close the braces.
Julian Glover
2,578 PointsAlthough 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;
}
}
ady hipe
609 Pointssame someone inform NICK Petit
Jenna L'Esperance
1,502 PointsNot 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
2,525 PointsI 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
983 PointsStill having a problem with this
Jeff Ward
8,978 PointsStill broken... But thank you
Michael Horstman
15,432 PointsAh! 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; } }
Alyssa Gowan
46,260 PointsCheck your background color :) It says set it to darkgreen yet it appears you put navy.
Saad Khan Malik
25,199 Pointswhoops!.. but that was a typo here... not in the actual code-challenge...