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 Nathaniel Nasarow
Nathaniel Nasarow
10,291 Points

Lining everything correctly in the gallery? (bootstrap, html, css)

First, code and website! Please go to the gallery to see my problem. http://torgian.github.io/website-dev

I'm trying to get the gallery thumbnails to line up properly... 1, maybe 2 pictures per row on mobile, expanding to three or 4 as you go up to desktop view.

Now, keep in mind that I AM using bootstrap. I could probably fix it all up in CSS without using bootstrap, but I think I would still run into the same problem.

Specifically, I cant really seem to figure out how to keep the images from scrunching up when I limit the height or width. Furthermore, even if I do that, the images' rows tend to "break"... resize the gallery window and you'll see, it's easier to see what i mean by looking at it than it is for me to explain it here.

Any advice?

2 Answers

mtch
mtch
8,521 Points

Have you tried to lay out your gallery with flexbox ? What else you could have a look at is Masorny.

http://masonry.desandro.com/

Nathaniel Nasarow
Nathaniel Nasarow
10,291 Points

Thanks for your comment. I've bookmarked both of those, but I have, in fact, finally figured it out today.

Ge W
Ge W
4,992 Points
Ge W
Ge W
4,992 Points

Hello?

Nathaniel Nasarow
Nathaniel Nasarow
10,291 Points

Hello!