Can all column heights be the same height with button aligned to the bottom

[core365]

Hi, I’m trying to do it so all 3 columns in my row are the same height. I found a post with a link to some CSS which also aligns the buttons to the bottom, but the column heights still aren’t the same (the buttons are aligned though which is great!).

Here’s the link with instructions to Method 1: Flexbox I’ve used:
https://michaelbourne.ca/create-columns-equal-heights/286/

Here’s the CSS:

.flexmethod {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -ms-flex-line-pack: stretch;
 align-content: stretch;
 -ms-flex-wrap: wrap;
 flex-wrap: wrap;
}
.x-container:before {
 content: normal;
}
.container {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex; 
 -webkit-box-orient: vertical; 
 -webkit-box-direction: normal; 
 -ms-flex-direction: column; 
 flex-direction: column;
}
.item-button {
 margin-top: auto;
}
.x-container:before {
 content: normal;
}

I’ll put the URL to my web page in a secure link as it’s a test page at the minute and here’s a screen grab for your reference:

Thanks!

[paul.r]

Hi @core365,

I have checked and can see both column 1 &2 have 20px margin bottom
Please add 20px margin bottom to your third column as well.

Try adding this in Theme Options > CSS

.flexmethod ..x-column {
    margin-bottom:20px !important;
}

Hope that helps

[core365]

Sorry! I did check the padding and other settings to the columns but forgot to check the Element CSS in Customize for the columns!

Thank you so much for checking and getting back to me quickly, it’s much appreciated and it’s all sorted!

Thanks!

[ruenel]

You’re welcome!
We’re glad @Paul.r were able to help you out.