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
Jamie Williams
5,097 PointsClearing every 4th list element wouldn't work if you added more images to the gallery.
Whilst the nth-child(4n) works for this particular example, would I be right in saying that if you were to add more images that the next clear: left would occur on the 8th list element, which would be the middle of the 3rd row, thus completely breaking the layout of the gallery?
How would you go about making this work if there were more than 2 rows to the gallery when the first image of each row would have a sequence of 4, 7, 10, 13 etc?
Jason Anello
Courses Plus Student 94,610 PointsThis problem also happens for the two column layout as well.
You can see this thread for more details:
https://teamtreehouse.com/forum/3-column-layout-nth-clear-not-working
2 Answers
Stone Preston
42,016 PointsIn the teacher's notes of the video, Nick mentions this:
In this video, the selector :nth-child(4n) is used to correct a responsive issue on every 4th item. In other words, this will select the 4th item, 8th item, 12th item, and so on. This fixes the specific problem in the video, but if more gallery items are added beyond the 5 that are present in this project, the design will start to break again. That's because there are 3 items in each row, and every 4th item could appear at the beginning, middle, or end of a row.
Instead, we want to select the first item in each row. A more robust solution is to use the selector :nth-child(3n + 1) instead. This will select every 3rd item plus 1. In other words, this will select the 4th item, 7th item, 10th item, and so on.
so try changing your nth child selector to :nth-child(3n + 1)
Jason Anello
Courses Plus Student 94,610 PointsIt does select the 1st item too. The notes leave that out though. It doesn't hurt to clear the first item so it's ok to do it.
Jamie Williams
5,097 PointsOh brilliant, missed that, thank you!
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsHi Jamie,
You're correct.
It will work correctly for up to 6 items, the layout will fail for sure with 8 items because that 8th item will drop down to the 4th row.
It will possibly fail with 7 items depending on the heights of all the items in the second row. If a taller item comes before a shorter item in that second row then the 7th item will not reach all the way to left but instead stop when it hits the taller item from the row above.
This is the reason we have to do the clearing in the first place, because we have variable height items.