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 Build a Three Column Layout

Posted by Mike Hovet
Mike Hovet
1,153 Points

Stage 8 - Build a Three Column Layout 5th item (Number 12) won't clear 3rd item (Number 6) on my phone.

My number 12 is getting pushed to the right because the caption of number 6 is too large. I tried:

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

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

but it did nothing. Can someone see something I'm not?

Here is the screenshot:

https://pbs.twimg.com/media/B_7uCWcVIAAvTpy.jpg

mikes02
mikes02
Courses Plus Student 16,968 Points

It's important to understand that 4n and 5n means that your CSS is targeting every 4th element and every 5th element respectively. Is that what you are going for? Or are you just wanting to target specifically the 4th element and specifically the 5th element? If that's the case, remove the n, and use :nth-child(4) and :nth-child(5)

Mike Hovet
Mike Hovet
1,153 Points

Thank you, I didn't know that. But also it still didn't do anything. :/