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 How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

Khalil Najjar
Khalil Najjar
587 Points
Posted by Khalil Najjar
Khalil Najjar
587 Points

pseudo element nth child doesn't work with more items in the gallery...only a bandaid.

Hello, all! When building the responsive code for the gallery and using the clear: left; command on the 4th element in the gallery, we were able to make the transition seamless between the high resolution to low resolution viewing. I wanted to see what happens when we have more elements in the list so I added a bunch of items to the gallery. Sure enough, the site made the same glitch on the 3rd, 7th, and 11th gallery items as it did before we applied the pseudo element modification for the 4th element in the list...

Seems like the solution we were taught is only a band-aid and not a solution at all.

My question is this: what can be done to fix this floating problem other than adding exceptions for every erroneous item in the gallery? My ideas are as follows:

  1. Make a change in the overall formatting of the text used to describe the individual gallery items such that it does not exceed two lines and therefore will not be a cause for images appearing inconsistently. Not sure how to do this...

  2. Increase the overall padding for each gallery item to account for a potential 3rd line of text in the gallery item description.

Any help to make this code more modular is appreciated! Thank you for your quick responses!

3 Answers

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Marcin's suggestion is a good one.

Using the :nth-child pseudo-class, you would use :nth-child(3n+4) if you want to alter the styles on the items in the 4th, 7th, 10th, etc positions.

:nth-child(4n) is effectively the same as :nth-child(4n+0), meaning every fourth element, starting from the 0th (zeroth), which really means, start with item number 4 and then the 8th, 12th, etc.

As for multiple lines of text... vertical spacing can certainly create a lot of headaches, but it may come down to just adding the clear property where required. You definitely don't want to get to a point where you have to place arbitrary limitations on the amount of text for a floated block.

If you throw your code into a CodePen or something, I can have a look at it.

Marcin Smałz
Marcin Smałz
13,284 Points
Marcin Smałz
Marcin Smałz
13,284 Points

You should change the rule to work on every 3rd element starting from four. I checked it and it works. Revise a lesson again and see how you can use nth child with a simple formul in in something like 4+3n it should work then.

Chris Wiley
Chris Wiley
11,327 Points
Chris Wiley
Chris Wiley
11,327 Points

Have you tried working from a last-child, orphan or widow?