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

Laith Wallace
PLUS
Laith Wallace
Courses Plus Student 858 Points
Posted by Laith Wallace
Laith Wallace
Courses Plus Student 858 Points

Im 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.

css/main.css 
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;
}
Stephen Omoarukhe
Stephen Omoarukhe
15,307 Points
Stephen Omoarukhe
Stephen Omoarukhe
15,307 Points

try :

@media screen and (min-width: 480px) {

        body{
               background: navy;
    }

}

@media screen and (min-width: 660px) {

        body{
               background: darkgreen;
    }

}

4 Answers

Brett Cole
Brett Cole
10,181 Points
Brett Cole
Brett Cole
10,181 Points

Your 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
PLUS
Laith Wallace
Courses Plus Student 858 Points
Laith Wallace
Laith Wallace
Courses Plus Student 858 Points

im 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
Brett Cole
10,181 Points
Brett Cole
Brett Cole
10,181 Points

yes. 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
PLUS
Laith Wallace
Courses Plus Student 858 Points
Laith Wallace
Laith Wallace
Courses Plus Student 858 Points

Can you type out the code for me so I can see what it looks like. Thanks

Stephen Omoarukhe
Stephen Omoarukhe
15,307 Points
Stephen Omoarukhe
Stephen Omoarukhe
15,307 Points

checkout 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;
}

}