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

Posted by Justin Cantley
Justin Cantley
18,068 Points

Filtered list items won't clear properly.

I have an interactive photo gallery project where the search bar will filter results as you type in your search. The problem is that the list items are hidden but still exist. This causes the filtered results to clear as if the hidden items are still showing which leaves awkward gaps in the image rows. How can I get the rows to appear properly without these awkward gaps?

Link to my project: https://github.com/JustCant/InteractivePhotoGallery

1 Answer

Matthew Lang
Matthew Lang
13,483 Points
Matthew Lang
Matthew Lang
13,483 Points

I have fixed this for you and left a note on GitHub.

Basically your nth-child(3n+1) calculation for clearing the left float still accounted for the <li>'s that had display:none.