[Support request] Elementor column equal height

[Darren]

Dear reader,

does anyone have a solution to my problem? I have 4 columns, but this differs per device. I would like the columns on all pages to have the same height.

It concerns the first 4 columns. The URL to the website: https://makkelijkbelbaantje.nl/

By the way, I use Elementor Pro.

I like to hear it 🙂

Sincerely,
Darren

[David]

Hi there,

this is really out of our scope and something you may want to address with Elementor. However it looks like you have added this .equal-height-content CSS class to the icon box widgets, so try this:

.equal-height-content {
    height: 100%;
    display: flex;
}

[Simon]

It is slightly annoying that other page builders have an ‘equal height columns’ option, but not elementor..
I do it a slightly different way, but with very similar CSS to David’s method above.

I always use at least 2 nested sections, with the outer section set to ‘stretched’ and the inner sections set to default (boxed, blank width). This will ensure that the columns line up vertically. A structure like this:

> Section
 > Column
  > Inner Section
   > Column
    > Heading
  > Inner Section       <----- set the css class on this section
   > Column
    > Call to Action
   > Column
    > Call to Action
   > Column
    > Call to Action
  > Inner Section
   > Column
    > Other Widget

Then set the CSS class of the inner section only (Advanced->Advanced->CSS Classes) to, e.g: ‘equal-height-content’.

Add the CSS below, to either your child theme ‘style.css’, the appearance editor or your custom css plugin. It is very similar to David’s above, but will target only the correct column content.

section.equal-height-content div.elementor-widget-wrap > div {
    display: flex;
    height: 100%;
}

It might work not using nested sections, but I haven’t tried it.

[Michael]

Found this, please let me know if it works:

https://smarative.com/blog/equal-height-column-on-elementor

[David]

Thanks for sharing Michael.

[Author]

Posts