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

Challenge Task (Refactor the layout)

I'm trying to pass the first challenge of "Refactor the layout" topic. The challenge asks me to add a width of 28.333% to the gallery list items inside the media query. So I'm adding the code:

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

#gallery li { width: 28.3333%; }

}

When I run the code, it gives an error. I've tried many different variants I don't see the problem with the code I wrote yet I can't pass the challenge.

Any ideas on how to beat this?

Thanks

7 Answers

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) { 
  #gallery li{width: 28.3333%;} 
}
            ``` 


Try to copy the entire code and replace

I wrote the same and don't have problem @media screen and (min-width: 480px) { #gallery li{width: 28.3333%;} }

That's very strange. I just copied the code from your answer and still the same problem.

"Bummer! Be sure to set the width of gallery list items to 28.3333% when the browser is wider than 480px."

It worked when I copied it the whole code! I was writing the media query to the beginning of the CSS- do you think that was the reason? Or it was a bug with the challenge system? Thanks!!

you should respect the order of the code that they provide

There is an empty media query rule specified at the end of the css file. Maybe you had written the same rule for the second time at the start of the file, at least that's what I had done :-D

i had the same problem and the reason is because i started writting on the top of the css, but the document already provide you with a media query at the bottom, so you either delete that one or just that one