Classic Cards / Flip Cards Same Height

Support
#1

Hi, I’m using the classic cards element here:

And I am trying to get all these cards’ height to match the largest. Simply setting a minimum height will not suffice due to responsiveness issues. I have tried the following script, which I found here: https://theme.co/apex/forums/topic/make-columns-same-height-in-cornerstone/.

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

I also changed out .x-column in the script for .x-card-inner and .x-card-outer, with no joy.

Any advice or modification of this script would be much appreciated.

Many thanks in advance,

MH

How to make Card height the same. Not classic type
Classic Cards Same Height
#2

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

#3

Thanks! URL below:

#4

Hi There,

Please update your JS code to this:

(function($){
  $(window).bind('ready load resize', function(){
    var max = 0,
        mobile = $(window).width();
    if ( mobile > 767 ){
      $(".home #x-section-1 .x-card-inner").each(function(index, el) {
        if( $(this).height() > max ){
            max = $(this).height();
        }
      });
      $(".home #x-section-1 .x-card-inner").css('height', max);
    }
  });
})(jQuery);

And then add this to Theme Options > CSS

@media (min-width: 768) and (max-width: 979px) {
	.home #x-section-1 .x-face-content {
		padding: 0 !important;
	}
}

Hope it helps,
Cheers!

#5

Thanks @friech. I’ve entered the JS and CSS but no joy. Please let me know if you have any further recommendations.

#6

Hi there,

I tried the code that was suggested previously and it seems to work fine but there seems to be something in your setup that’s stopping it to work.

Would you mind providing your admin details so that we can check it?

Thank you.

#7

Details below:

#8

Hi there,

Credentials aren’t working, but please replace the above javascript with this.

(function($){
  $(window).bind('ready load resize', function(){
    var max = 0,
        mobile = $(window).width();
    if ( mobile > 767 ){
      $(".home #x-section-1 .x-card-inner").each(function(index, el) {
        if( $(this).height() > max ){
            max = $(this).height();
        }
      });
      $(".home #x-section-1 .x-card-inner").css('min-height', max);
    }
  });
})(jQuery);

Thanks!

#9

Hi, still not working I’m afraid.

Admin credentials reset and below:

#10

Hi there,

It’s working okay as I checked it, but there is a slight delay before it takes effect depending on the loading speed of your site. In that case, please replace that code with this.

(function($){

  function card_fix_height () {

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

  }

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

That should minimize the delay of code execution. Please check and wait in case it’s to slow on your end, the code works okay. Javascript is different from CSS, the effect is not instant.

Thanks!

2 Likes
#11

It’s working now. Thank you again for superb support! :grinning:

#12

You’re most welcome.

#13

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