[Support request] Elementor column equal height

Home Forums Support [Support request] Elementor column equal height

Home Forums Support Elementor column equal height

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #672444
    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

    GeneratePress 2.1.4
    GP Premium 1.7.2
    #672568
    David
    Staff
    Customer Support

    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;
    }
    #672682
    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.

    #2064451
    Michael

    Found this, please let me know if it works:

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

    #2064733
    David
    Staff
    Customer Support

    Thanks for sharing Michael.

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.