Classic Card - want to make all the same height

[Pudzisz]

Hi,

I have a 5 column section on my home page with Classic Card elements in each of them. How can I have them all the same height? It looks acceptable on PC screens, however, horrible on tablets or any other smaller devices except mobile.

What do I have to change in order to have the classic (flip) cards responsive and all the same height or a least have them displayed mobile has it - one by one, not all in one column?

Thanks a lot!

[thai]

Hi There,

Please follow these steps:

• Add the my-section class to your section:

• Add the following code under Theme Options > JS:

(function($){

  function card_fix_height () {

    var max = 0,
        mobile = $(window).width();
    if ( mobile > 767 ){
      $(".my-section .x-card-inner").each(function(index, el) {
        if( $(this).height() > max ){
            max = $(this).height();
        }
      });
      $(".my-section .x-card-inner").css('min-height', max);
    }

  }

  $(window).resize( card_fix_height ).load( card_fix_height );
  $(document).ready ( card_fix_height );
    
})(jQuery);

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Hope that helps and thank you for understanding.

[Pudzisz]

Hey, thanks for your response!
It worked properly (all same height even on tablet screen) once I changed it to:

if ( mobile > 769 ){

Somehow it didn’t display right for tablet view; but was good for PC screens when you had >767.

Thanks so much!

[ruenel]

You’re welcome!
Thanks for letting us know that it has worked for you.