Elementor column equal height

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;
}

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.

Found this, please let me know if it works:

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

Thanks for sharing Michael.