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:
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.
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.
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.
