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

Posted by Akyya Mayberry
Akyya Mayberry
1,948 Points

My code is correct for the 660px break point, but it's saying its wrong.

I got the previous question right so I copied and paste it for this 660px breakpoint. I just changed the 480px to 660px and the background from navy to darkgreen. But it keeps saying my code is incorrect. I don't know what else to do.

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;
  }
Jan Kiesewetter
Jan Kiesewetter
6,745 Points
Jan Kiesewetter
Jan Kiesewetter
6,745 Points

You are not closing the @media part .... forgot the "}"

Akyya Mayberry
Akyya Mayberry
1,948 Points

Your absolutely right. The ending } on my first media query was missing. Thanks so much!

2 Answers

Grace Kelly
Grace Kelly
33,990 Points
Grace Kelly
Grace Kelly
33,990 Points

Hi Akyya, you simply forgot to close your media query statements simply add the closing curly braces to each statement and the challenge will pass :)

@media screen and (min-width: 480px) {
  body {
    background: navy;
  }
} //add closing curly brace

 @media screen and (min-width: 660px) {
  body {
    background: darkgreen;
  }
 } //add closing curly brace

hope that helps!!

Akyya Mayberry
Akyya Mayberry
1,948 Points
Akyya Mayberry
Akyya Mayberry
1,948 Points

As commented, the closing bracket was missing for one of my media queries. Thanks you guys for such an immediate response. I can now close this.