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
Emmett Armstrong
3,794 PointsCode Challenge Broken?
I just completed the video about media queries, and followed along in my own workspaces window. My code worked correctly and I believe I understand the concept.
I went to take a code challenge, and I passed my first task easily enough. Set breakpoint at 480 px and change body color to navy. However, I can't pass the next code task even though it's worded EXACTLY the same, simply with different variables.
Since my code passed the first test, shouldn't it also pass the second one? I have manually retyped my code in addition to copy and paste, so I don't know what else to do to move forward.
@media screen and (min-width:480px){
body{
background:navy;
}
@media screen and (min-width:660px){
body{
background:darkgreen;
}
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;
}
4 Answers
Kelly von Borstel
28,880 PointsI think you're missing the second closing bracket between the two media queries.
@media screen and (min-width:480px){
body{
background:navy;
}
}
@media screen and (min-width:660px){
Jeremy Woodbridge
25,278 PointsYou forgot to close both body brackets inside the media query selectors. It should be fine after that
Emmett Armstrong
3,794 PointsThanks everyone. Got it fixed!
Emmett Armstrong
3,794 PointsThanks everyone. Got it fixed!