Equal Height Columns

Hey dear colorlib support,

I have a question formatting columns. I have some columns going on on different pages of my website, and I want them to have equal height on a per row - basis. And I want it to behave that way in any possible resolution (so a “make all columns as high as the highest one is” code would be the perfect fit here).

However I cannot find out how to do it, and Google does not really help me.

Here is an example: https://studna-band.com/firmenevents/

The boxes in the middle of the page look pretty good in most resolutions, but when I resize the browser window or put the resolution to 1152 x 648 px (for example), it’s not equal anymore…

Can you help here? Columns are made with Shortcodes Ultimate, but alternative solutions are also welcome.

Hello there,

I hope you are doing well today.

You can use the following CSS code to set the height of the columns by going to Appearance > Customize > Additional CSS and pasting it there.

/*Column height*/ .su-box { height: 500px; }

Best Regards,
Support

I have this problem too, and tried the code, but it does not work for me.

For me neither…I mean it works, but (as described above) it’s of no use for me to set pixel height as other boxes on the site don’t fit anymore with the set values, and on top of that, my problem is that I need them to respond to the screen resolution. This isn’t done with px setting as columns (and boxes) get too small as soon as resolution hits a certain low value. I need a “height=100%” - similar thing, but that one doesn’t work.