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

Posted by Dorothy Bauckman
Dorothy Bauckman
7,614 Points

CSS gallery layout question

I've been experimenting with the base site that we built in the "How to Build a Website" course, and I'm trying to add additional items to the gallery page. In the original CSS file, we cleared the 4th child of the gallery li left to make the layout work. I assumed i could do the same thing with the 7th child, but it isn't working out as expected.

You can view the project on CodePen here: http://cdpn.io/lGEep (this is my first time really working with CodePen so my apologies if the link doesn't work!) I've tried several different things to try to make this work, but no luck so far. I would be very grateful for any help!

4 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Dorothy,

:nth-child(4n) selects every 4th child, not the 4th child only as I think you understand it. So it would select the 4th, 8th, 12th, ...

:nth-child(4) would select the 4th child only, notice there's no n in the expression.

By adding :nth-child(7n) you are also selecting the 7th, 14th, 21st, .... in addition to what the 4n expression is selecting. So using a second :nth-child doesn't help. In fact, you'll be clearing the wrong elements at least some of the time.

The 4n expression in the video is actually the wrong expression to use for a 3 column layout. It works for up to 6 items but then breaks down with 7 or more items as you have in your codepen. The Teacher's Notes section for that video should have the correction for it.

We need to clear the first item in every row. That ends up being the 1st, 4th, 7th, 10th, ... not 4th, 8th, 12th, ....

The correct expression is 3n + 1 It's easiest to read these from right to left - "Select the 1st child and then every 3rd child after that.

So you should be fine if you change your first :nth-child expression to 3n + 1 and remove:

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

As long as you are clearing the floats on the correct items you can have variable height images. Really the whole reason we have to do the float clearing is because the captions can be variable height and in your case the images are too.

There's also a similar problem for the two column layout at smaller widths which I don't think has a course correction yet. You can find more info about this problem here: https://teamtreehouse.com/forum/3-column-layout-nth-clear-not-working

Travis Birch
Travis Birch
3,602 Points
Travis Birch
Travis Birch
3,602 Points

You can fix the problem by simply resizing the images so they are the same size, the 6th image is much longer then the others. It will take no extra css or html markup and it will also make your site look better. You can see how it worked for me here. If you have any others questions i'd be glad to help you.

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

Thanks for posting the CodePen, it makes it a lot easier to help you trouble shot. So you problem the width of the li elements. On line 250, their width is set to 28.3333% of their container/parent element. This means you can only fit 3 per row. If you want 6 per row then you need to set their width to 11% and remove this from line 259:

#gallery li:nth-child(4n) {
    clear: left; 
}
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Even if the goal is to have 6 per row you would still have to fix the 7n expression and change it to 6n + 1

Dorothy Bauckman
Dorothy Bauckman
7,614 Points
Dorothy Bauckman
Dorothy Bauckman
7,614 Points

I did not realize that 4n selected every 4th item, and not just item #4. Using (3n +1) has fixed the problem! Thank you so much to everyone for your help, I really appreciate it and I've learned a lot :)