[Michael Burton, CFP®Participant]

Hello – I’ve tried a number of fixes to try to get the flip cards on my home page to have the same height; but I’m still having issues. It seems to not have as many glitches when my site is viewed in Chrome and Firefox vs. IE Explorer.

This is the code I have in my CSS customizer right now:

.page-id-870 .x-card-outer.flip-3d .x-card-inner {
min-height: 650px;
}

At first the min height was 350px. I kept raising it to see if it would make a difference. But it doesn’t.

It’s really the most noticeable when I manually resize my browser window. The narrower I make the window, the more the heights of the cards seem to bounce around, responding the size of the text on the flip side of the card, I believe. Perhaps it’s as simple as adding a min-height to the inner card? I didn’t try that. I get a little shaky on this stuff since my day job is, well, selling life insurance! Ha!

Thanks so much in advance for your help!

[Michael Burton, CFP®Participant]

This reply has been marked as private.

[Michael Burton, CFP®Participant]

This reply has been marked as private.

[RadModerator]

Hi there,

Thanks for posting in.

Would you mind letting me where I’m able to find the flip card? I don’t see any flip card on home-page.

Thanks!

[Michael Burton, CFP®Participant]

Yes. All three flip cards are on the home page of fiduciarylife.com. The credentials are posted above. I gave you the wrong site name mistakenly but posted the correct one above, along with the login credentials. Look at the post beneath the one with the credentials for termlifecomparison.com. Sorry for the confusion! I’m working on both sites at the same time, hence the confusion.

[Rue NelModerator]

Hello There,

Thank you for clarifying. I’ve noticed that you used this code:

.home .x-card-outer.flip-3d .x-card-inner {
    min-height: 350px;
}

Please update it and add this custom css as well.

.home .x-card-outer.flip-3d .x-card-inner {
    min-height: 350px;
}

.home .x-card-outer.flip-3d .x-card-inner .x-face-title {
    min-height: 78px;
}

.home .x-card-outer.flip-3d .x-card-inner .x-face-text {
    min-height: 56px;
}

This code will make sure that the text and the title will have a minimum height so that they will all be inline and that the card will have the same heights.

Hope this helps.

[Michael Burton, CFP®Participant]

Works like a charm, Rue. Thank you for all of your tremendous help and expertise!

[Prasant RaiModerator]

You are most welcome. 🙂

[Author]

Posts