Same height for classic cards

Support
#1

Hi, I’m using the classic cards element here: (I’m using GYM expanded clasic cards included)

And I am trying to get all these cards’ height to match the largest.
I believe there is a CCS code, but I’m unable to see where to write it.
Don’t know much more what I can do.
thanks in advance

1 Like
#2

Hello Jose,

Thanks for asking. :slight_smile:

Please take a look at the solution mentioned in following thread:

Thanks.

#3

Hi Prasant, thanks for your response.
but still doesn’t work.
the cards elements are still on different heights
my site is https://matnikh.com/x/#/content/276/inspector

#4

Hi Jose-Antonio,

The link you provided is under Coming Soon! mode, please provide us login credentials in a Secure note so we can take a closer look, and please provide us the direct page URL where we can see the cards.

Hope it helps,
Cheers!

#5

just removed the under construction plugging

#6

Hi,

The code is not working because your cards is in the second section but your js code is refering to the first section(x-section-1)

Please add a unique id to the section with the cards

Then use that id in your js code. Please change the js code to this

jQuery(window).on("resize", function () {
    var max = 0,
    mobile = jQuery(window).width();
alert(mobile);
    if ( mobile > 767 ){
      jQuery(".home #my-cards .x-card-inner").each(function(index, el) {
        if( jQuery(this).height() > max ){
            max = jQuery(this).height();
            alert(max);
        }
      });
      jQuery(".home #my-cards .x-card-inner").css('height', max);
    }
}).resize();

Hope that helps

#7

Hi.
I just created a new section with the ID: my-cards as suggested
The JS script provided I Ran it from the cornerstone side button JS in the the page and tried also doing it from the main content also in cornerstone. it came a message saying: “An embedded page on this page say 2220”

But still the cards are different sized from each other.
What I’m missing?
Thanks again

#8

now the message says 2560

#9

ok, removed the code from the JS in the home pag (cornerstone) and the error messages went away. but still the cards are not working
looking forward your comments
thks

#10

Hi Jose,

Where did you add the code? I can’t see it and there is the static height from the cards.

The reason it’s not working is setting the height, when it’s set, it will remain on that value permanently since the condition is if height is greater than maximum height but it became all the same. Please try changing the code to this

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

Still, I’m not sure where that static height from the cards. If you have other custom codes then please remove them for now.

Thanks!

#11

Hi, can you please tell me where exactly to change this code? I have been changing it in couple of places but is not working.
thanks

#12

Hello Jose-Antonio,

Thanks for updating in!

You should be adding the code in the Cornerstone > Custom JS section.

After you have place the JS code, you will have to clear your plugin cache first since you have Endurance Page Cache. Or you can temporarily disable it by going to Settings > General > Endurance Page Cache.

Hope this helps. Kindly let us know.

#13

Now it worked!! thanks guys!

#14

Glad it’s now working, cheers!

#15

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