Card Elements not displaying same height

Support
#1

Hello,
On our test website on the homepage I have 4 card elements listed but all are displaying different heights. All cards need to display the same height.
I tried solving the problem using the following CSS code in the Global CSS file:
English Homepage:
.page-id-28 #x-section-4 .x-card-inner {
height: 252px !important;
}
.page-id-28 #x-section-5 .x-card-inner {
height: 252px !important;
}

German Homepage (FYI, I am using the WPML plugin for the German pages):
.post-863 #x-section-2 .x-card-inner {
height: 252px !important;
}
.post-863 #x-section-3 .x-card-inner {
height: 252px !important;
}

After saving above code and refreshing the page, all the tiles are displaying the same height.

However, when I navigate onto a different page and return to the homepage, the height differ in size again. Here’s an example:

What can I do, so that each time I navigate to the homepage and change between English and German Versions all the card element heights are the same height?

Thanks for your assistance,
Cara

#2

Hello again!
It appears I was able to fix the issue myself.
The “Center Vertically” selection for the card element seems to be in conflict with my CSS code.

Once disabled, all card elements are showing the same height, even after changing languages and navigating to and from different pages.

Please close this ticket.

Many thanks,
Cara

1 Like
#3

Thanks for letting us know!