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

Emmett Armstrong
Emmett Armstrong
3,794 Points

Code Challenge Broken?

I just completed the video about media queries, and followed along in my own workspaces window. My code worked correctly and I believe I understand the concept.

I went to take a code challenge, and I passed my first task easily enough. Set breakpoint at 480 px and change body color to navy. However, I can't pass the next code task even though it's worded EXACTLY the same, simply with different variables.

Since my code passed the first test, shouldn't it also pass the second one? I have manually retyped my code in addition to copy and paste, so I don't know what else to do to move forward.

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

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

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

4 Answers

Kelly von Borstel
Kelly von Borstel
28,880 Points

I think you're missing the second closing bracket between the two media queries.

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

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

You forgot to close both body brackets inside the media query selectors. It should be fine after that

Emmett Armstrong
Emmett Armstrong
3,794 Points

Thanks everyone. Got it fixed!

Emmett Armstrong
Emmett Armstrong
3,794 Points

Thanks everyone. Got it fixed!