Equal Height Three Columns

Support
#1

Hi, using the below JS I can force two columns to be the same height based on the tallest column. However, it doesn’t seem to work with three columns (it uses the middle-height column, which means one column is too long)… Any tips:

(function($){
  $(window).bind('ready load resize', function(){
    var max = 0,
        mobile = $(window).width();

    if ( mobile > 767 ){
      $(".equalize .x-column").each(function(index, el) {
        if( $(this).height() > max ){
            max = $(this).height();
        }
      });
      $(".equalize .x-column").css('height', max);
    }
  });
})(jQuery);
#2

Hi There,

Thanks for asking!

Please use margin less column to make equal height columns. It will always takes the height of large column.
In this case no need of any . custom JS.

Make the row margin less.

Hope this helps

Thanks

#3

Hi Thanks. However, is there any other way of doing this? as I would like a margin between the three columns?

#4

Hi there,

I tried the code you are using in my local setup and it works fine.

Kindly provide the URL of your site so that we can check.

Thank you.

#5

Yes, its’s working fine but I don’t want to use marginless columns as my columns have a gap between them…

#6

Hi there,

I didn’t use marginless column and the code still worked fine.

Kindly provide your URL.

#7

OK, URL below.

#8

Hi There,

Seems like you set height to 245px, I am using a fairly small laptop and the content is leaking outside of the columns.

I would suggest using min-height: 245px instead.

All your columns do have the same size on my end.

Please clean your browser cache and test it again.

Thanks

#9

Yes, the height is being set by the JS function I think!

#10

So I think I need the JS function to not set the height of the block, but the min-height… How can I do this?

#11

Hi There,

The JS actually tells your columns to have the size of your biggest column.

If you are still facing issues, please provide your wp admin credentials and point the specific page so we can take a closer look.

Thanks

#12

Thanks, login details below.

#13

Hi There,

I have updated your code to :

(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);

And now it works :slight_smile:

Hope it helps!

#14

This is epic! Thanks!

#15

You’re welcome.

#16

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