Classic Cards Have Extra Paddings

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/

Hello John,

Thanks for writing in!

Please take a look at solution shared in following thread. Please click on the title to open the full thread:

Thanks.

Hi Prasant,

I tried that solution but it is still not working.

Thank You

John

Hi John,

Can you please send us with a screenshot? This is how your cards look like on my end:

Thank you.

Hi John,

I see this strange padding issue, but it happens randomly when loading your site.

Could you also please try adding the following CSS rule into your X -> Theme Options -> CSS area and see if that helps.

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

Further, I would suggest you to disable any caching plugins and test your issue further.

Thanks!

I added the code and disable the caching plugin and here what it looks like now. It look like just the bottom needs to be fixed.

Hi John,

Without that CSS, the boxes are all with the same sizes unless the text breaks into multiple lines. I checked on firefox and it’s okay too, without or without that CSS, I don’t see any extra padding. But again, it doesn’t have the same height if the text breaks into multiple line.

May I know what Firefox version you’re testing it with?

Thanks!

Hi Rad,

I am using Firefox version 66.0.1.

Thank You

Hi John,

Could you try upgrading to 66.0.3? I’m not sure if it’s related but it works on my older browser too. I’ll continue checking, and may I know your screensize so I could test it as well?

I can’t reproduce it anywhere, they always have equal size if texts aren’t breaking into multiple lines.

Thanks!

Hi Rad,

I updated to 66.0.3 but the issue still shows on my end. My screensize is 5120x2880.

Thank You

Hello John,

Thanks for updating the thread. :slight_smile:

I checked the website on Firefox and changed the resolution to mimic the layout in dev tools. I am unable to reproduce the issue. Please see screenshot.

Thanks.

Hi Prasant,

I cleared my cookies/cache in Firefox but it is still showing up on my end.

Thank You

Hi John,

Still the same on all my tests, the only difference is that I don’t have the device with that screen resolution. All I could do is zoom in and out which of course, no issues too.

Could you try it on another device with different screen resolution just so I could confirm it’s related to that before I continue the investigation.

Thanks!

Hi Rad,

I tried it on a laptop with a lower resolution and it has the same issue in FireFox.

Thank You

Hi John,

I was able to replicate it on my end but then I refresh the page and its gone. It’s randomly appearing on my end.

To fix this, you can try adding the code below in Cornerstone > CSS

.x-card-outer .x-face-inner {    
    max-height: 315px;
}

Hope this helps

Hi Paul,

I added the css code but unfortunately it is still showing the extra padding. I made sure to clear cookies/cache before testing.

Thank You

Hey John,

There might be an issue with the CSS code that you have in the Global CSS such as some CSS syntax error that is stopping the CSS code you are adding to work as expected.

To verify that, please copy all the codes that are in the Global CSS and paste it here.

It should provide some information if there are any CSS error that is causing the issue that you have to fix so that the CSS codes will work.

In case there are no CSS errors but the code is still not working, please provide us with the admin access to your site in a Secure Note:

Hi Jade,

I am still having issues. There were CSS warnings but no errors. Here’s access to the site.

Thank You

Hi John,

Thank you for providing the credentials. I checked your setup and I see you had Jetpack’s lazy loading for images enabled. I went ahead and turned it off. Please clear your browser’s cache and test the page again

Let us know if the issue persists!