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

Mark VonGyer
Mark VonGyer
21,239 Points
Posted by Mark VonGyer
Mark VonGyer
21,239 Points

Question is not accepting the correct answer

Hi,

The first part passed correctly.

The second part (asking for darkgreen for screens larger than and including 660px is not passing the test). This seems odd as I've copied the code into a workspace and it operates correctly on a website.

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;
 }
Mark VonGyer
Mark VonGyer
21,239 Points
Mark VonGyer
Mark VonGyer
21,239 Points

The challenge code is the last two parts

2 Answers

Joseph Wachira
Joseph Wachira
17,972 Points
Joseph Wachira
Joseph Wachira
17,972 Points

Hello Mark,

It seems you forgot to close the media queries code blocks.

The code should look like this:

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

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

PS. Notice the curly braces "}"

Mark VonGyer
Mark VonGyer
21,239 Points
Mark VonGyer
Mark VonGyer
21,239 Points

thanks! I feel so stupid XD