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

HTML How to Make a Website Responsive Web Design and Testing Refactor the Layout

Posted by Allie Merkley
Allie Merkley
1,619 Points

I cannot get past this question please help

I don't know what I am doing wrong

css/main.css 
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) {

}

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

  #gallery li: nth-child(4n) { 
  clear:left;
  }

}

1 Answer

Michael Collins
Michael Collins
3,447 Points
Michael Collins
Michael Collins
3,447 Points

Hi Allie,

You have the correct answers in your code, but you have some formatting errors. At the bottom of your CSS file you have:

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

}

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

  #gallery li: nth-child(4n) { 
  clear:left;
  }

}

You have duplicated the media query so you have two for the 480px breakpoint. Then your bottom block of CSS isn't within the media query and after that you have an extra closing bracket. You also have a space between li and :nth-child which can be removed.

So you have the correct CSS for the task, but it just needs to be reformatted like below:

@media screen and (min-width: 480px) {
    #gallery li {
        width: 28.3333%;
    }
    #gallery li:nth-child(4n) { 
        clear:left;
    }
}

I hope that helps.

Michael Collins
Michael Collins
3,447 Points
Michael Collins
Michael Collins
3,447 Points

The task does actually allow both answers

#gallery li:nth-child(3n+1)

#gallery li:nth-child(4n)

However, the question asks for every fourth list item to be selected.

#gallery li:nth-child(4n)

Does this and selects the 4th, 8th, 12th etc.

However with the below

#gallery li:nth-child(3n+1)

Although it does select the fourth element, it doesn't select every fourth element.

It will select the 4th, 7th, 10th, 13th etc. So it is technically wrong.