Multiple rows of same height columns on one page

[mikeshudson]

Hi, I know this is a popular topic on here, (I have previously asked about it here), but I can’t work this out… I have two rows on a page; each row has three columns and I need the columns in each row to be the same height (e.g. the height of the tallest column in their row).

Using the following JS, provided by one of your team on the thread referenced above, I am able to get the first row on the page to present correctly. However, the second row on the page that uses the .equalize class is not working. Please can you help?

(function($){
  $(window).bind('ready load resize', function(){
        mobile = $(window).width();
    if ( mobile > 767 ){
      $('.equalize').each( function() {
      var max = 0
      $(this).find(".x-column").each(function(index, el) {
        if( $(this).height() > max ){
            max = $(this).outerHeight();
        }
      });
      $(this).find(".x-column").css('min-height', max);
      } );
    } else {
            $('.equalize .x-column').css('min-height' , 0 );
    }
  });
})(jQuery);

I have included a link to the page and log-in credentials below.

[basanta]

Hi There,

Thanks for writing in and the details!
The JS code is working fine and its adding the height to the columns.

Please try to add more content to a column and check, Now each column having equal amount of content.

Thanks

[mikeshudson]

Why is the JS not choosing the tallest column to set the min-height at?

I’ve tried adding more content; adding more to just the first column; and adding margin to bulk it out, but no joy.

[paul.r]

Hi,

Try adding a different class to your second row.

Add equalize to the first row then add equalize1 to the second row.

After that, change your js code to this

jQuery(document).ready(function($) {

$(window).on("resize", function () {
 mobile = $(window).width();
    if ( mobile > 767 ){
        var max = 0;
	$(".equalize .x-column").each(function(index, el) {
		if( $(this).height() > max ){
			max = $(this).height();
		}
	});
	$(".equalize .x-column").css('height', max);
	
	var max1 = 0;
	$(".equalize1 .x-column").each(function(index, el) {
		if( $(this).height() > max1 ){
			max1 = $(this).height();
		}
	});
	$(".equalize1 .x-column").css('height', max1);
}
}).resize();
});

Hope that helps

[mircotripoczky]

Wouldn’t it be easier to tell each row “display: flex;” and then each column “display: flex; flex-direction: column;” and one of the options for “justify-content:” like space-around, space-between etc.?

And for tablet/mobile display you just add a media query for the rows, that adds “flex-direction: column;”.

[Alaa]

Hi @mircotripoczky

Yes, that’s indeed an easier solution, thanks for sharing this one.

Have a great day!

[mikeshudson]

This is a fantastic solution and the first time I’ve come across it.

@Themeco, this is great advice and should be featured somewhere seeing as this is some a common query.

Thanks all!!

[Alaa]

Thanks @mikeshudson for the feedback, you are welcome