Equal Height Columns Code Not Working

Hi!

I’m attempting to use the CSS shown here to make columns equal height.

I have added the equal-height class to the columns.

Can you please see where I have gone wrong?

Thank you?

Hi there,

Thanks for writing in! I checked your site and I see you’ve added equal-height class to the columns instead of the section which is why it isn’t working (see screenshot)

To fix the issue, remove equal-height class from all the columns and add it to the main section that contains all the columns.

Let us know how this goes!

That did the trick!

Thank you!

Glad we could help.

Cheers!

Hi,

Can you tell me how to make this active for mobile as well?

Thanks!

Hi there,

The Javascript code should also work on mobile in its initial load.

If you used the CSS option:

@media (min-width: 768px) {
 .equal-height .x-container {
    display: flex;
 }   
}

You may remove the block:

@media (min-width: 768px) {

}

So the code should just be:

 .equal-height .x-container {
    display: flex;
 }   

Let us know how it goes.

Hi,
Thanks for your assistance. It did make them equal height but jammed all the columns together.

Hi there,

In that case, please remove the CSS code and use the Javascript option instead but please try this code:

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

This will take the height of the longest column in the section with the equal-height class and assign it to the height of the rest of the sections including on mobile.

Hope this helps.

That worked.

Thank you!

Glad we were able to help :slight_smile:

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