Can the buttons all line up at the bottom of each column?

[core365]

Hi, I’ve got a section with 1 row and 3 columns and the first 2 columns have 1 button at the bottom, but the second column has more text, so the button in the first column is floating above the very bottom of the column instead of aligning to it. I’m trying to have all 3 columns the same height and the buttons in column 1 and 2 to align to the bottom of the columns. I’ve tried to change the flex box settings to see if that would alter it, but nothing happens!

Hope you can help!

Here’s a screen grab to show where on the page it is. I’ll put the URL in a secure note as it’s on a temp link.

Thanks!

[christopher]

Hi @core365,

There is a trick to achieve what you want, please bear with me while explaining this, I know it might seem counter-intuitive.

First thing first, please go to the settings of each column and enable the Flex layout for each column:

Now that you have Flex layout on each column, there is a trick that you can force an item inside the column to show the reverse. At the moment the order is from top to bottom:

• Title
• Text
• Button

Please go to the button settings and set the Top Margin to auto:

The top margin is going to force the button element to show at the very bottom of the column. Now regardless of the text height, you will always have the bottom at the bottom of the column.

You can learn about this peculiar behavior of the CSS Flexbox here.

Hope that helps

[core365]

Hi @christopher.amirian,

That’s great, thank you! I would never have guessed to do that, but I’m glad it works!

Thanks for your help!

[nabeel]

Glad it worked.

Cheers!