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

Karolina Przybyl
Karolina Przybyl
3,617 Points
Posted by Karolina Przybyl
Karolina Przybyl
3,617 Points

@media screen and (min-width: 480px) { #gallery li { width: 28.3333%; } } what is wrong with this code?

I cannot progress in the test cause it does not accept the code I have written, but I cannot see a mistake. I have also tried @media screen an (min-width: 480) {

}

gallery li {

width: 28.3333%; }

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

}

2 Answers

Marcus Bellon
Marcus Bellon
2,866 Points
Marcus Bellon
Marcus Bellon
2,866 Points

I just did the assignment and it worked fine for me. Your formatting is sloppy, maybe that is throwing it off?

@media screen and (min-width: 480px) {
  #gallery li {
    width: 28.3333%;
  }
}
Karolina Przybyl
Karolina Przybyl
3,617 Points
Karolina Przybyl
Karolina Przybyl
3,617 Points

I have already managed to find the mistake on my own but thanks for your tip. I allow myself to be a bit sloppy since its only a test code.