Equal Columns 'Team'

[ThibaudDS]

Hello

On my Team page i want to show the 3 members of the team and i want to make these columns equal heights.
Can you give me a custom code how to do this please?
the site is: http://vhwp.vhcarsystems.be/over-ons/ It’s at the bottom. (‘Ons Team’)

Thanks in advance

[nabeel]

Hi @Vhcarweb,

Thank you for reaching out to us. You can follow this guide https://theme.co/apex/forum/t/code-snippet-make-all-columns-equal-height/272 to make all the columns equal height.

Cheers!

[ThibaudDS]

Hello @Nabeel

I added the class equal-height to every column. now there is one problem. when i go to theme options, there is no longer an option CSS. i have tried 3 options: added it to the global css (didn’t work), added it to the extra css in the customizer (didn’t work) and i’ve added it to the custom element css (didn’t work either). i am sure the class was set right and saved.
What did i do wrong?

[friech]

Hi Thibaud,

You need to add the equal-height class to the Section (not on the columns).

The Custom CSS area is on the left panel of the Theme Options > CSS

If that did not work, please provide us login credentials in a secure note so we can take a closer look.

Hope it helps,
Cheers!

[ThibaudDS]

Ok so now they are equal height! Very happy about that! But now the second column is too short and my text is coming out of the bottom

[thai]

Hi There,

Instead of using the custom JS, I recommend you to try with the flexbox CSS.

Please add the flex-box to your container contains the columns:

After that add this custom CSS:

.flex-box {
  display: flex;
  flex-flow: wrap;
}

Hope it helps

[ThibaudDS]

that worked out fine! Now only one minor problem, on mobile, these columns are right under eachother with no spacing at all. can we change that?

[jade]

Hi there,

Please add this code to the Global CSS:

@media (max-width: 767px) {
    .flex-box .x-column {
      margin-bottom: 15px;
    }
}

Hope this helps.

[ThibaudDS]

Thank you!

[nabeel]

You’re most welcome!