Streaming live at 10am (PST)

Need help with flexbox

I have the nav bar and main “hero” section under control. Where things start to break down is three box images at the bottom.
I can make it work fine until the browser changes sizes…then there is white space between the image blocks when the browser size gets bigger.

How do I format the 3 image blocks in a responsive way where they will always touch on the sides and no white space will appear between them?

Section with 3 column layout. Then add the picture to the background of each column with a “contain” setting?

The section containing the columns should be a flexbox. You’ll need to use cover for the background images, though. I think contain will give you problems when the columns change shape due to the changing window.

I don’t think you need flexbox for this. Just set the background images to cover and use a 3 column layout.
Do you also need to know how to do the zoom effect on those 3 columns?

This article might be helpful for when to use flexbox:

1 Like

Ok thanks…should the image be the background of the column or should it be in an image container…in the column?

If you want that zoom effect i’d recommend putting a div with a background image within the column with the height set to 100%.
Set the column to overflow: hidden and let the div scale a bit on hover.

Don’t forget to set the column’s padding to 0 on both left & right.

You’re right. The background-size:cover; was the important part of the answer and I mixed up columns and flexbox in my mind for some reason.

What if I want the images to be clickable links…should I use a link block instead of a div block?

Thanks for the help.

Yes–although an alternative that might be helpful when trying to convert an existing div block into a link block is to simply drop the existing div into the link block. :smile:

1 Like

Ok Ive literally been working on this since 7:00am this morning.
It still does not work but here is what I have so far.

Everything looks fine…but as soon as I resize the browser…everything gets jumbled like a deck of cards.


I won’t be able to look at your project now but try selecting the row or one of the columns and click the settings icon on the top right. Once you’ve clicked that there will be a few options on how to order the columns for different screen sizes.

Yes…it works fine when going smaller…its when the screen gets bigger that the issue occurs.

I’ll take a look later today.

I can only test it on a laptop screen for now. Could you provide screenshots of how it looks on your screen?

I actually got it working with flexbox.

Thank you very much for your help today.

Great! Whatever works best.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.