Classic Cards Same Height

Support
#1

Hi,

i’m using the card element on my website and I am trying to get all these cards’ height to match the largest and i have the same issues as the user in thise post:

Link to my website: https://fpj.at/home

i have imported this JS

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

and this code to my css

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

but it doesnt work.

Many Thanks
FP

#2

Hello Franz,

Thanks for writing to us.

Please replace the code by the given code

jQuery(document).ready(function($){ 
        var max=0;
        jQuery(".home #x-section-4 .x-card").each(function(index, el) {
            console.log( jQuery(el).height() );
        
            if( jQuery(el).height() > max ){
                max = jQuery(el).height();
            }
        });
        jQuery(".home #x-section-4 .x-card").css('height', max);
});

Please make sure you have added the section ID as “x-section-4”.

Remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

#3

Hi Prakash,

thanks a lot - the code works fine!

KR
Franz

#4

Glad to hear that, Franz!

#5

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