Columns of equal height


#1

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


#2

Hello Jan,

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

Let me know how it goes.

Regards,
Kharis


#3

Hi Kharis,

Sorry but this plugin does not work on my site.

I hope you have another solution.

Thanks & regards,
Jan


#4

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


#5

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


#6

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


#7

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


#8

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


#9

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


#10

Thanks Kharis,

Works perfect.

Regards,
Jan


#11

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