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

Ben Musholt
Ben Musholt
4,983 Points
Posted by Ben Musholt
Ben Musholt
4,983 Points

Why do my gallery images lose their formatting at the bottom of the page?

Hi all,

I am trying to create a gallery of some artwork that sits 3 across when in desktop viewing and 2 across in mobile/responsive mode. The 3 across only works for the top few images, but it breaks down at the bottom of the page, with staggering of the pics. I don't see anywhere how the images/code are different to cause the disarray. What am I missing?

Any feedback would be a great help. Thank you!

Here is a snapshot: https://w.trhou.se/zo8xlxkuwg

1 Answer

Liam Clarke
Liam Clarke
19,938 Points

This happens due to floating over multiple lines, you need something called a clearfix

I would recommend using something different for this effect though, like flexbox which is considered the modern way of dealing with this 9Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

Ben Musholt
Ben Musholt
4,983 Points
Ben Musholt
Ben Musholt
4,983 Points

Thanks, for the response Liam. I'll look into the flexbox solution.