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 Curt Hill
Curt Hill
5,568 Points

I can't get past the nth child question on the challenge

gallery li:nth-child(4) {

clear:left; }

/* isn't this the correct code to clear the left of every 4th li in #gallery? */

Thanks

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) {
  #gallery li {
    width: 28.3333%;
  }
  #gallery li:nth-child(4) {
    clear: left;
  }
}

3 Answers

bleedcmyk
bleedcmyk
5,945 Points
bleedcmyk
bleedcmyk
5,945 Points

If you're trying to clear every 4th list item you would want to use something like this instead;

#gallery li:nth-child(4n+0) { }

Where 4 is the cycle size, and 0 is where the cycle counter begins. So this would target every 4 list items starting with the 4th.

This code would target the 4th and only the 4th.

#gallery li:nth-child(4) { }

(I'm not certain this is what you're trying to do. I made an assumption based on your wording.)

Curt Hill
Curt Hill
5,568 Points
Curt Hill
Curt Hill
5,568 Points

Trying to clear every 4th item, and your solution worked for me. Thanks so much!

derrick johnson
derrick johnson
2,711 Points
derrick johnson
derrick johnson
2,711 Points

Just to be clear, in the tutorial Nick only puts:

gallery li:nth-child(4)

He does not add the (n+0) which is probably confusing for 90 percent of people who have never coded. Should probably be fixed...