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

Zachary Pratt
Zachary Pratt
2,395 Points
Posted by Zachary Pratt
Zachary Pratt
2,395 Points

Break Point Challenge

The recommended changes, still does not pass code challenge, for dark green background?

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

Gareth Borcherds
Gareth Borcherds
9,372 Points
Gareth Borcherds
Gareth Borcherds
9,372 Points

You're missing some closing brackets. You need to close your first media query with a } before you start your second one, that's why it isn't working.

Marc Busby
Marc Busby
35,550 Points
Marc Busby
Marc Busby
35,550 Points

As Gareth says, you need to close the media queries like follows: 

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