Streaming live at 10am (PST)

Make CMS Columns Same Height

#1

So i’m working on my website, and I’m trying to do a few things with the CMS collections, I would like each item to stretch to the same, as you can see the button in the middle CMS item is shorter, however I think it will look best with all items equal length.

Is there a way to do this?

Thanks In Advance!


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

#2

Is this your intended effect?
https://drive.google.com/file/d/15C538NJrT7hVQreZUZtrKqbhTBLPC4Oe/view

#3

No i’m more looking to have each item stretch to the highest height item in the CMS list.

#4

@TD3Marketing
Can you share screenshots of your flex settings?

What happens when you flex align vertical stretch the collection List

image

With Vertical Stretch, make sure child Collection List Items are set to standard Display Block

#5

I do have it set to stretch, but it stays the same size.

#6

Is this your intended result?

Before:

After:

#7

yes thats exactly what I need! :slight_smile:

#8

@TD3Marketing
Each ROW for your Column needs to have fixed height.

For example, here are your ROWS
Column Header Label Row (eg. Analytical Services) = 1.5em Height
Column H3 Header Row (eg. Jasko Development - New Britain) = 3.125 Height
Column Date Label Row (eg August 3, 2018) = 1.5em Height
Column Image Row - = 8.5em Height
Column Paragraph Row = 12.5em Height
Column Button Row = 3.5em Height

^^ By treating each element as a row with fixed height, your CMS columns will be aligned evenly.

You can use CMS Row div block Height or Element Height to your preference. I prefer to use EM values for establishing row height but you can use pixel too if that’s to your liking.