Columns of equal height

Hi Support Team,

How can I make columns of equal height? F.e: https://sabv.nl/atex-adn/

I want the have the left column the same height as the right column.

Hope you can help.

Thanks & regards,
Jan

Hello Jan,

Follow this video tutorial that might be working for you as well.

Let me know how it goes.

Regards,
Kharis

Hi Kharis,

Sorry but this plugin does not work on my site.

I hope you have another solution.

Thanks & regards,
Jan

Hi Kharis,

I have found a way to make colomns of equal height: adjust the bottom padding till both columns have the same height but I hope there is a better, less complicated, solution to do this.

Thanks & regards,
Jan

Hello there,

Try disabling custom padding and add this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 781px) {
      #pg-832-0 > .panel-row-style {
        margin: 100px 0 !important;
        padding: 0 !important;
        background-color: rgba(255,255,255,0.8) !important;
        min-height: 200px !important;
      } 
    }

You might need to disable column/widget background color as well.

Regards,
Kharis

HI Kharis,

Thanks ! This is almost what I need. Still one issue: how can I add to add space between text and image column.

Pls. note that I changed the code as follows:

 @media only screen and (min-width: 781px) {
      #pg-832-0 > .panel-row-style {
        margin: 100px 0 !important;
        padding: 25px !important;
        background-color: rgba(255,255,255,0.8) !important;
        min-height: 500px !important;
      } 
    }

Hope you can help me.

Thanks & regards,
Jan

Try adding this code:

#pg-832-0 #pgc-832-0-0 .textwidget {
   padding-right: 60px;
}

it should not affect on smaller screen. So you should put it inside the media query in your previous code. Your complete code would look like this:

@media only screen and (min-width: 781px) {

  #pg-832-0 > .panel-row-style {
    margin: 100px 0 !important;
    padding: 25px !important;
    background-color: rgba(255,255,255,0.8) !important;
    min-height: 500px !important;
  } 

  #pg-832-0 #pgc-832-0-0 .textwidget {
    padding-right: 60px;
  }
   
}

Regards,
Kharis

Hi Kharis,

Thanks this works but for this page only. Maybe I did not inform you well. I need this solution for all pages which have columns on this site: www.sabv.nl. See navigation tab: Examens
Pls. note that my client is still adding pages which will have coloums as well.

Hope you have a solution.

Thanks in advance,
Jan

Hello Jan,

Firstly you’ll need to add a custom class name to your row so that we could use it as a general selector instead of use unique ID like #pg-832-0. Edit the respective row, enter a class name (for example: my-row) into Row Styles > Attributes > Row Class.

Then you could use the below CSS code:

@media only screen and (min-width: 781px) {

  .my-row.panel-row-style {
    margin: 100px 0 !important;
    padding: 25px !important;
    background-color: rgba(255,255,255,0.8) !important;
    min-height: 500px !important;
  } 

  .my-row.panel-row-style .textwidget {
    padding-right: 60px;
  }
   
}

Regards,
Kharis

Thanks Kharis,

Works perfect.

Regards,
Jan

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis