Equal-height columns

[KEXINO]

Hi all. Sorry, yet another support request on creating equal height columns

I’ve a 4 column section. Each column contains an image, below that is a headline, below that is some text, and below that is a button. I want each column to have equal heights until they reach the 768 breakpoint. Pretty standard so far, right?

I don’t want to add any Javascript voodoo, I’d rather solve this with CSS if possible. I’ve tried using the code snippet from HERE. I tried adding it in the section and also tried adding it to the row. Neither worked. I also tried toggling marginless columns for the row, but neither option works for me.

I also tried the code mentioned HERE. That didn’t work for me either.

Any help/advice most welcome!

[jade]

Hey Gee,

The code you have applied actually works as it made the columns where you added the customization of the same height. It’s just that the buttons are not aligned since the last column have more text so the button gets pushed lower.

You will have to add some additional code to the site if you want the buttons aligned at the bottom of the columns.

Firstly, please update this code:

.equal-height {
    display: flex;
    flex-flow: wrap;
}

to

.equal-height {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    flex-flow: wrap;
}

then add a common class to the buttons in every row:

and add these codes in the Global CSS:

.equal-height .x-column {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    align-items: center;
}

.item-button {
    margin-top: auto !important;
}

The code above assumes that the class you have added to the buttons in each column is item-button

Hope this helps.

[KEXINO]

Awesome! Works perfectly. Thanks so much!

[nabeel]

Glad we could help.

Cheers!