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 trialLaith Wallace
Courses Plus Student 858 PointsIm having a problem with the darkgreen background colour in this code. Can anyone help?
breakpoint should be 660px but for some reason the task says Ive wrote the code wrong after the first breakpoint at 480px.
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;
}
@media screen and (min-width: 660px) {
body {
background: darkgreen;
}
4 Answers
Brett Cole
10,181 PointsYour missing the closing brackets. You need to close both the @media and also the body tags. Example- '''css @media screen and (min-width: 480px) { body { background: navy; } }'''
Laith Wallace
Courses Plus Student 858 Pointsim using this code
@media screen and (min-width: 660px) { body { background: darkgreen; }
and its still not working in the challenge question.
Is it wrong?
Brett Cole
10,181 Pointsyes. at end you need two closing brackets. you need to close the body tag but you also need to close the @media also. so after background: darkgreen; you would have } } one for the body and one for the @media
Laith Wallace
Courses Plus Student 858 PointsCan you type out the code for me so I can see what it looks like. Thanks
Stephen Omoarukhe
15,307 Pointscheckout the code i wrote on this timeline, it might help out.
try :
@media screen and (min-width: 480px) {
body{
background: navy;
}
}
@media screen and (min-width: 660px) {
body{
background: darkgreen;
}
}
Laith Wallace
Courses Plus Student 858 PointsThanks so much that works...
Stephen Omoarukhe
15,307 PointsYour welcome.
Stephen Omoarukhe
15,307 PointsStephen Omoarukhe
15,307 Pointstry :
@media screen and (min-width: 480px) {
}
@media screen and (min-width: 660px) {
}