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

azusa hyde
azusa hyde
688 Points
Posted by azusa hyde
azusa hyde
688 Points

my code is wrong for making background dark green

my code won't pass - what am i doing wrong? want to make the second breakpoint background color dark green

@media screen and (min-width: 480px) { body { background: navy; }

@media screen and (min-width: 660px) { body { background: darkgreen; }

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

2 Answers

Luciano Bruzzoni
Luciano Bruzzoni
15,518 Points
Luciano Bruzzoni
Luciano Bruzzoni
15,518 Points

hey there, I believe your issue is due to not closing the media query tags like:

@media screen and (min-width: 480px) {
    body {
        background: navy;
    }
}

hope that helped!

Colin Bell
Colin Bell
29,679 Points
Colin Bell
Colin Bell
29,679 Points

Make sure to close the second media query as well:

@media screen and (min-width: 480px) {
  body {
    background: navy;
  }
}

@media screen and (min-width: 660px) {
  body {
    background: darkgreen;
  }
}