Equal height columns - but different for every row

Hey,

I tried to equalize the height of some columns on my page. I have tried the JS and the flex method.

The problem with the flex method is that it does not work on Safari on Mac. After I searched your support pages, I therefore decided to go back to the (old) JS method.

The problem I have is that I would like the Javascript to equalize the column height for each row specifically. Now every column on the page is displayed at the same height (that of the highest column).

Please help

Hi Matth,

Thank you for reaching out to us. You can give separate classes to your sections e.g equal-height-1, equal-height-2 etc and then apply JS for each section:

jQuery(document).ready(function($) {
	var max1 = 0, max2 = 0;
	$(".equal-height-1 .x-column").each(function(index, el) {
		if( $(this).height() > max1 ){
			max1 = $(this).height();
		}
	});
	$(".equal-height-1 .x-column").css('height', max1);

	$(".equal-height-2 .x-column").each(function(index, el) {
		if( $(this).height() > max2 ){
			max2 = $(this).height();
		}
	});
	$(".equal-height-2 .x-column").css('height', max2);
});

You can also refer to the following article here https://theme.co/apex/forum/t/code-snippet-make-all-columns-equal-height/272

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Hope this helps!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.