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 Yurij Krot
Yurij Krot
3,818 Points

There are some BUG

In second Challenge task not working code: #gallery li:nth-child(4){ clear:left; } Its working in the browser and even in preview mode, but its not working in chalenge. Why???

3 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Yurij,

`:nth-child(4) only selects the 4th item, not every 4th item. So it doesn't meet the requirements of the challenge. The reason that it appears to work in the browser as well as the code challenge is because there are only 5 items. It wouldn't work in the general case though of an unknown number of items.

If you had 8 items for example then :nth-child(4) would only select the 4th item but :nth-child(4n) would select the 4th and the 8th item. So they would differ in what they select for 8 or more items.

Victor Rodriguez
Victor Rodriguez
15,015 Points
Victor Rodriguez
Victor Rodriguez
15,015 Points 
@media screen and (min-width: 480px) {
    #gallery li{
    width: 28.3333%;
  }
  #gallery li:nth-child(4n){
    clear:left;
  }
}
Yurij Krot
Yurij Krot
3,818 Points
Yurij Krot
Yurij Krot
3,818 Points

Thanks, I am understand. For Every need add "n" to the number.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Yes, the n allows multiple elements to be selected. The general form of it is :nth-child(an + b) where you put in numbers for a and b

The browser will then plug in values for n (0, 1, 2, 3, 4, 5...) and this determines what gets selected.

The way you can think about an + b is that b is the first element you're going to select and then a is what you will keep adding to it.

Example: :nth-child(3n + 5) This means that we're going to select the 5th element and then every 3rd element after that (keep adding 3)

That gives us: 5th, 8th, 11th, 14th, and so on.

You don't have to worry too much about it right now because this project wasn't meant to teach you this. If you get into css foundations then I think it is covered in more detail there.