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 Refactor the Layout

Posted by Curtis Bradshaw
Curtis Bradshaw
7,917 Points

Code won't work for Media Query Code Challenge? Help?

Hello all. For Step 1 of the Code Challenge for Refactor the Layout. It keeps telling me that my code is incorrect even though I'm entering it exactly how it was written in the video. All it says is that I need to make the width 28.3333% if the browser is wider than 480px. Can someone help me out?

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

gallery li {

width: 28.3333%; }

}

Thanks!

css/main.css 
@media screen and (min-width: 480px) 
{
  #gallery li 
  {
   width: 28.3333%; 
  }

}









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) {

}
Edgar Gil
Edgar Gil
13,322 Points
Edgar Gil
Edgar Gil
13,322 Points

Can you show your HTML CODE please.

1 Answer

Kelly von Borstel
Kelly von Borstel
28,880 Points
Kelly von Borstel
Kelly von Borstel
28,880 Points

It looks like you have the same selector #gallery li further down in the css, which is overriding the width you set for #gallery li at the top of css.

Curtis Bradshaw
Curtis Bradshaw
7,917 Points

I commented all of that code out and it still didn't work. When I took away the li from the gallery identifier, it magically worked so I'm not sure why it did that. Thanks for the response though.