Flipping cards on the same row with different height

Support
#1

Dear Themeco Support,
I don’t know anything about code and I have the same problem as last year with the flipping cards. At that time, I didn’t have the x pro version. The flipping cards were not the same height on my home page http://www.coursanglaisnantes.fr . As far as I can remember, you kindly solved the problem by asking me to add some css or js code but the discussion doesn’t appear in my topics anymore since I moved to the theme x pro version.
I have created a new page (draft status) http://www.coursanglaisnantes.fr/?page_id=790&preview=true and the 3 cards that appear on the same row are different. I would like all the cards to have the same height.
I would really like it fixed and I hope you can help me.
Thanks in advance :slight_smile:
Alexandra

#2

Hi Alexandra,

I have checked the second link that you have provided but it is not accessible as it is just a draft. I have also checked the flip cards on the homepage and they seem to display with the same dimensions.

#3

Hi Jade
Yes, the problem is not with the homepage but with the other one. I have just published it so that you may help me. Here’s the link : http://www.coursanglaisnantes.fr/cours-anglais-nantes-intermediaire .

I also have another problem : the icons don’t display at all with the feature list option although the page is published. They do display when I’m working on the page. For example : there should be one before the title “TROUVEZ UNE VRAIE MOTIVATION ET APPRENEZ UN ANGLAIS UTILE EN FONCTION DE VOS BESOINS”.
I know the page is long, but it’s a sales page so I cannot split the content on two pages.

Thank you

#4

Hello There,

Thank you for the clarifications.

1.) To resolve this issue, please edit your page back in Cornerstone and in the custom js section, Custom JS and insert the following custom js code

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

2.) The icons are not showing because there is a JS error on the page. Upon further investigation it turns out that you are using an older version of Pro theme. Pro 1.1.1 is now available in automatic updates! This release contains fixes for several issues so be sure to check out the changelog (https://theme.co/changelog/). Please do update to the latest version. After doing the updates, always remember to clear all caches when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Please let us know how it goes.