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 Johan Rönkkö
Johan Rönkkö
28,054 Points

img gallery with flexbox

What is the best way to make an img gallery with flexbox? I tried an unorderd list with the img-tag and p-tag (for img text) inside te li-tag, but it feels "buggy". My p-tag goes outside the container when too much text, instead of breaking to another line. In larger sizes, if i have an odd number of images the last img take the full width of the main-container. I want a 3 column layout at the largest size, but all the images should be equal in width and height. How can i achieve this?

3 Answers

Craig Watson
Craig Watson
27,930 Points

Hi Johan,

Do you have CodePen ?

I can set you something up on there with flexbox in professor mode and you can chat to me on there and explain if you are getting the desired result ?

Craig

Johan Rönkkö
Johan Rönkkö
28,054 Points

That would be great! I have a signed up for free, don't know if the free sign up works in professor mode though?

huckleberry
huckleberry
14,636 Points

Great thinking, Johan!! I didn't even know this was a thing! Treehouse should totally implement something like that.

Could y'all post the results of your pow-wow here for the benefit of other folks? That'd be awesome.

Cheers,

Huck - :sunglasses:

Craig Watson
Craig Watson
27,930 Points

Here is the treehouse snapshot from the code on codepen.

https://w.trhou.se/27pmfrbsxl

Hope this helps and give you something to play around with and see what results you can achieve :)

If you fork the snapshot you can then preview the page and there is a great link to all things felxbox on there.

Hope I managed to help you out

Craig!

Johan Rönkkö
Johan Rönkkö
28,054 Points
Johan Rönkkö
Johan Rönkkö
28,054 Points

I've now solved it. The issue where the last image (when odd number of images) take up the full width of the main-container still remains though. At a mobile-first perspektiv i started with giving the li-element display: flex and flex-flow: column wrap. At media query min-width 769px i gave the ul-element display:flex and flex-wrap:wrap, the li-element flex: 1 45% for two-column layout. At media query min-width: 1025px i gave the li-element flex: 1 25% for three-column layout. The problem with the p-tag wasn't really a problem. In my testing i have a really long word without any spaces which wont break line and go outside of the li-container. If you have a better way of solving this please post it, i'd love to improve my solution!

Craig Watson
Craig Watson
27,930 Points

Hi Johan I am around all day now if you still want to have a look at how I may have done in on codepen, its up to you I dont mind at all :)

Craig

Johan Rönkkö
Johan Rönkkö
28,054 Points
Johan Rönkkö
Johan Rönkkö
28,054 Points

i'd love to see your solution, what's your codepen? And can we party even though i do not have a paid version?

Craig Watson
Craig Watson
27,930 Points

Hi Johan,

Just set up the pen here

http://codepen.io/Craig-Watson/professor/yeKzKw/

No you only need the normal account to view and chat in professor mode :)

I am on there now getting a few things going so can have a chat and see what you think is best for your situation.

Craig