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
Paula Viera
2,409 PointsCode challenge on media queries
The process described in the video is not an option in the challenge. In the video it says to create a new CSS file called responsive.css. I believe that I added the correct code to the css/main.css that is provided but it doesn't pass the challenge??
<p> Create a breakpoint for devices 480 pixels wide or larger. Inside the breakpoint, set the body background to the color navy.
a {
text-decoration: none;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
}
#logo {
text-align: center;
margin: 0;
}
h1, h2 {
color: #fff;
}
nav a {
color: #fff;
}
nav a:hover {
color: #32673f;
}
h1 {
font-family: ‘Changa One’, sans-serif;
font-size: 1.75em;
font-weight: normal;
}
img {
max-width: 100%;
}
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 800;
padding: 15px 10px;
}
.profile-photo {
display: block;
margin: 0 auto 30px;
max-width: 150px;
border-radius: 100%;
}
.contact-info {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9em;
}
.contact-info a {
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding: 0 0 0 30px;
margin: 0 0 10px;
}
@media screen and (min-width 480px) {
body {
background: navy;
}
</p>
Thanks.
7 Answers
Emma Willmann
Treehouse Project ReviewerLooks like you are missing a colon after min-width. I tried it, and it worked.
@media screen and (min-width: 480px) {
body {
background: navy;
}
Paula Viera
2,409 PointsAwesome. Thanks very much.
Paula Viera
2,409 PointsJason, Thanks very much for pointing that out.
Wendel Ferreira
4,258 PointsSo, what is wrong with my code:
@media screen and (min-width:480px){ body{ background: navy; } }
Wendel Ferreira
4,258 PointsSo, what is wrong with my code:
```@media screen and (min-width:480px){ body{ background: navy; }
Jason Anello
Courses Plus Student 94,610 PointsI can't see anything wrong with it.
Do you have that at the end of all the css?
I just copied your code and pasted it into the code challenge and it passes.
Try refreshing the page or restarting your browswer.
Wendel Ferreira
4,258 PointsThe code challenge only accepted when I missed the final bracket, I think it has a bogus on the code checking the right answer!
Jason Anello
Courses Plus Student 94,610 PointsYou're saying that you removed the second closing brace and it passed?
I pasted in your code as is with both closing braces and it passed. Maybe it's a little glitch.
brandypineda
1,773 PointsMine inly worked if i removed both closing curly brackets....same trick won't work for second task nor having seemingly correct code...
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsAlso, if you are missing the closing curly brace on the media query then you should add it in. It could trip up css that comes after.