Streaming live at 10am (PST)

Aligning items with responsive flexbox

Hello!

Having some trouble with my design.
I am trying to make 3 flexboxes (containing images and some text) in a grid the same size
The middle text-box is a little bigger than the others due to different proportions on the image above it.
It is for a CMS system so it has to be able to accept different image sizes (for convenience) and contain them.

How can this be solved?


Here is my site Read-Only: Webflow - Sentralen
(how to share your site Read-Only link)

Hey there!

Really the only way to ensure that your images are all the exact same size is to define a fixed height for them. In terms of your text boxes not being the same size, you should be able to change the “Sizing” option under Flex Child to be “Grow if possible,” which will make sure that the text box fits the entire container for the collection item. (See image below for setting).

image