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 Luc Nord
Luc Nord
2,304 Points

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

Saul Guardado
Saul Guardado
Courses Plus Student 492 Points 
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
Saul Guardado
PLUS
Saul Guardado
Courses Plus Student 492 Points
Saul Guardado
Saul Guardado
Courses Plus Student 492 Points

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

Luc Nord
Luc Nord
2,304 Points
Luc Nord
Luc Nord
2,304 Points

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."

Luc Nord
Luc Nord
2,304 Points
Luc Nord
Luc Nord
2,304 Points

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!!

Saul Guardado
PLUS
Saul Guardado
Courses Plus Student 492 Points
Saul Guardado
Saul Guardado
Courses Plus Student 492 Points

you should respect the order of the code that they provide

nnuxiragwh
nnuxiragwh
10,345 Points
nnuxiragwh
nnuxiragwh
10,345 Points

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

jose martinez
jose martinez
1,671 Points
jose martinez
jose martinez
1,671 Points

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