Classic Cards have extra padding

Support
#1

Hello,

For some reason the classic cards in the second row have extra padding. When I resize my browser window the extra padding is removed. https://apimetrology.com/

#2

Hi John,

Thanks for reaching out.

The scripts that apply height to the card is executed earlier than the content, hence, getting the wrong value. Try deactivating any optimization that you have and test it again. OR, please add this to your Theme Options > JS, this should re-initialize the height after the page is finished loading.

jQuery ( function($) {

$(window).load ( function() {

$(this).resize();

} );

} );

Then clear your cache and test it again.

Thanks!

#3

Hi Rad,

I added the code and cleared both the system cache and my browser cache and it’s still having the same issue.

Thank You

#4

Hi John,

The delay of the page loading is varying, but the code works once loaded. It just look it doesn’t work since the page is already rendered but not yet fully loaded. Example, you’ll notice that it still loading by checking the left bottom of your browser.

But, please enhance your code to this to make sure it’s triggered twice

jQuery ( function($) {

$(window).load ( resize_again );
$(document).ready ( resize_again );

function resize_again () {
$(this).resize();
}

} );

Thanks!

#5

The page is fully rendered but it still has the extra padding with the enhanced version of the code. Is there anything else I could try to do to fix this issue?

Thank You

#6

Hi again,

I checked your site and the code is working fine on my end. When the page loads completely the scripts executes and the bottom gap disappears (see screenshot)

I then tested the code using developers tools and it works as expected. Please make sure to clear your browser’s cache and let the page load completely.

Let us know how this goes!

#7

I cleared the cache and let the page load completely but I am still seeing it on my end.

Thank You

#8

Hey John,

Try replacing the previous code with the following one:

jQuery ( function($) {

$(window).load ( resize_again );
$(document).ready ( resize_again );

function resize_again () {
setTimeout(function(){$(this).resize(); }, 500);
}

} );

Let us know how this goes!

#9

Hi Nabeel,

Unfortunately the updated code is still showing the extra padding on the cards.

Thank You

#10

Hello John,

You’ll need to wait for the page to fully load it. The fully loaded page is crucial to adjust the paddings because you are using a % padding in each of the cards. You can compare the result by using at least 20px instead.

Hope this helps.

#11

Hi RueNel,

I am waiting for the page to fully load though and it is still showing up on my end. I also used px for the padding instead of the %. Is there anything else I could try to do to fix this issue?

Thank you

#12

Hello John,

I am no longer noticing the extra padding. Please clear your browser cache or use private browsing mode and test your site again.

Hope this helps. Kindly let us know.

#13

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