Flipping cards are not the same height

Vectorific_Design · August 24, 2017, 2:02pm

Dear Themeco Support,

I again seem to have a problem with the flipping cards! And my client really, really wants it fixed this time. So hope can help me!

It’s the same old issue. The cards or not the same height and when the window is scaled down, the cards are responsive (what I want) but look real funky. I recently added some cards and now you see this issue more than ever. Since there are going to be more and more cards added in the future, I would really like it fixed.

So I would like to have that all the cards are the same height and have the same behaviour, hope you can help. In the attachment a screenshots. See below the latest code solution you guys provided me. Thanks in advance, love to hear from you!

http://www.iwitnessindeschool.nl > ‘ik wil een gastspreker’ > ‘Gastspreker in opleiding’’

(function($){
$(window).on(‘load resize’, function() {
var max = 0;
$(".x-card-outer").each(function(index, el) {

$(this).find(".x-card-inner").each(function(index, el) {
 if( $(this).height() > max ){
  max = $(this).height();
 }
});
$(this).find(".x-card-inner").css('height', max);

});
});
})(jQuery);

<img src="//tco-forum-

ruenel · August 25, 2017, 5:53am

Hello There,

Thanks for posting in! It seems that there is a JS error on the page. Please have your JS code updated and make use of this code instead:

(function($){
  $('.x-navbar .x-nav-wrap.mobile a').on('click touchstart',function(){
    $('.x-btn-navbar').trigger('click');
  });
})(jQuery);


(function($){
  $(window).on('load resize', function() {
  var max = 0;
  $(this).find(".x-card-inner").css('height', 'auto');
  $(".x-card-outer").each(function(index, el) {
    
    $(this).find(".x-card-inner").each(function(index, el) {
     if( $(this).height() > max ){
      max = $(this).height();
     }
    });
    $(this).find(".x-card-inner").css('height', max);
  });
})(jQuery);

I have corrected the JS code and put some space between the two functions to separate them and make sure that there work independently.

Please let us know how it goes.

Vectorific_Design · August 25, 2017, 2:52pm

Hi RueNel,

Thank you for your reply! I updated the JS code in the ‘‘edit global javascript’’ but it doesn’t seem to do anything different. Am I doing something wrong? Love to hear from you!

Kind regards,

Annemarie

ruenel · August 26, 2017, 5:53am

Hello There,

Sorry if it did not worked out. There is still an error in the code. Please make use of this code instead:

(function($){
  $('.x-navbar .x-nav-wrap.mobile a').on('click touchstart',function(){
    $('.x-btn-navbar').trigger('click');
  });
})(jQuery);


(function($){
  $(window).on('load resize', function() {
    var max = 0;
    $(this).find(".x-card-inner").css('height', 'auto');
    $(".x-card-outer").each(function(index, el) {
    
      $(this).find(".x-card-inner").each(function(index, el) {
        if( $(this).height() > max ){
          max = $(this).height();
        }
      });
      $(this).find(".x-card-inner").css('height', max);
    });
  });
})(jQuery);

Please let us know how it goes.

Vectorific_Design · August 26, 2017, 2:34pm

Hi Ruenel,

Again thank you for your reply! I updated the Javascript, I see you included an extra line of code. Unfortunetely it doesn’t work I see you can change the code via Dashboard > customizer > custom > Edit global Javascript or via Cornerstone with the JS icon. I tried both but it didn’t work. Am I doing something wrong or do we need a different code? Many thanks for helping me!

ruenel · August 27, 2017, 8:41am

Hello There,

There is still a problem in the code. So i have modified it again. Please make use of this code instead:

(function($){
  $(window).on('load resize', function() {
    var max = 0;

    // check all card elements to get the maximum height
    $(".x-card-outer").each(function(index, el) {

      $(this).find(".x-card-inner").each(function(index, el) {
        if( $(this).height() > max ){
          max = $(this).height();
       }
      });
    });

    // apply the max height to all card elements
    $(".x-card-outer").find(".x-card-inner").css('height', max);
  });
})(jQuery);

Hope this helps. Please let us know how it goes.

Vectorific_Design · August 27, 2017, 9:56am

Hi Ruenel,

Thanks again for taking your time! I am afraid it didn’t work again. It even looks it kinda made it worse As some of the content goes completely outside it’s box when resizing. So I hope you’ve got another trick up your sleeve (javascript is like magic to me) and hope you will help me one more time if it’s in any way easier or allowed, you would have my permission to directly alter the code yourself in the customizer because I have a feeling this is a more trial & error situation. Again many thanks and love to hear from you again!

ruenel · August 28, 2017, 2:40am

Hey @Vectorific_Design,

To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look? This is to ensure that we can provide you with a tailored answer to your situation.

To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password

Thank you.

Vectorific_Design · August 28, 2017, 9:38am

Hi Ruenel, Thank you for your reply and effort I created a Secure Note with the requested info. Looking forward to your answer!

ruenel · August 28, 2017, 10:04am

Hello There,

Thank you for providing the information. I have again modified the code and used this:

(function($){
  $(window).on('load resize', function() {
    var max = 0;

    // check all card elements to get the maximum height
    $(".x-card-outer").each(function(index, el) {

      // initialize
      $(".x-card-outer").find(".x-card-inner").css('min-height', '0');

      $(this).find(".x-card-inner").each(function(index, el) {
        if( $(this).height() > max ){
          max = $(this).height();
          console.log(max);
       }
      });
    });

    // apply the max height to all card elements
    $(".x-card-outer").find(".x-card-inner").css('min-height', max);
  });
})(jQuery);

Please check your site now.

Vectorific_Design · August 28, 2017, 10:20pm

Hi RueNel,

Thank you so much!! that looks really good! Exactly what I wanted You’re a lifesaver!

There is one more thing and then I am really done! I couldn’t help noticing that around 800 px breakerpoint, 2 cards in the middle row lose their content. See screenshot. Would you be so kind and please help me out one more time? Love to hear from you!

nabeel · August 29, 2017, 8:03am

Hi again,

Can you please try adding the following CSS code in the Theme Options > Global CSS or in the Customizer via Appearance > Customize > Custom > Edit GLOBAL CSS

.x-card-outer .x-face-inner {
    height: auto !important;
}

Let us know how this goes!

Vectorific_Design · August 30, 2017, 8:53am

Yes that did the trick! Thank you all so much you for giving me this support. Couldn’t have do it with out you!

jade · August 30, 2017, 4:51pm

You’re most welcome.

TweetyBird2005 · September 18, 2017, 6:53pm

I am having same issue. www.jayizso.com

Where do I put the JS code update? (Not a programmer but do enough to be danagerous)

nabeel · September 18, 2017, 7:34pm

Hi @TweetyBird2005,

Thanks for writing around! The JS code will go into Appearance > Customize > Custom > Edit Global Javascript and the CSS code will go into Appearance > Customize > Custom > Edit Global CSS

Hope this helps!

nyko · September 30, 2017, 10:15pm

Hi guys I’m having the same issue but with Visual Composer flip cards, how can your code be used for those?

here’s the page in question :http://dev.latetedepioche.com/creations/

Thanks

rad · October 1, 2017, 9:25am

Hi there,

The above custom code is only applicable for cornerstone’s flip card. Visual composer’s native elements have a different structure and bit more complex. I suggest contacting a developer to see if it can be implemented.

Thanks for understanding.