Docs

[MattHoll]

Hello.

I have some cards on my homepage. They were fine before and I have not edited them at all in weeks but now one of them has gone bad and I cannot fix it.

Please see attached.

Basically, all of the content has dropped down off of the actual card.

It is acting as if the title on the card is too long. If I shorten it really short, the issue goes away and the image and text pop back up onto the card.

I tried deleting it and making a new one but the problem happens again.

I tried deleting it and duplicating one of the other cards that are okay and editing, but as soon as I start editing it, the elements drop off of the bottom again.

I tried making the image really small but the problem is persistent.

This can be viewed on my site here, if you scroll down a bit:

Any help is greatly appreciated.

http://www.hrvatskohomebrewprvenstvo.beer/

[MattHoll]

The issue occurs in Firefox and Chrome on a desktop iMac. It does not occur in Safari or on my iPhone.

[Joao]

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

[MattHoll]

This reply has been marked as private.

[Jade]

Hi there,

Please try to add this code in the customizer:

.x-card-outer.flip-3d .x-face-outer.front, 
.x-card-outer.flip-3d .x-face-outer.back, 
.x-card-outer.flip-3d.flipped .x-face-outer.front, 
.x-card-outer.flip-3d.flipped .x-face-outer.back,
.x-card-outer .x-face-inner,
.x-card-outer.center-vertically .x-face-content {
    float: left;
    display: block;
}

Hope this helps.

[MattHoll]

Thanks Jade. That fixed it for Chrome but that card is still messed up on Firefox.

[Joao]

Hi There,

Please Firefox browser cache and test it again,

Let us know how it goes,

Joao

[MattHoll]

I did that already before I tested it before and did it again now. No difference. Still broken.

[MattHoll]

And in fact, now the formatting of another card on that home page is wrong. The content on the card is no longer centered. This in Chrome and Firefox. See image attachment, please.

Thanks for any and all help.

[Christopher]

Hi there,

Please update previous code to :

.x-card-outer .x-face-inner {
    height: auto;
}
@media (max-width:1000px) and (min-width:767px){
.x-card-outer .x-face-title {
    font-size: 18px;
}
}

Hope it helps.

[MattHoll]

Yes! That worked! Perfect.

Thanks for the help!

[MattHoll]

One more thing. Sorry to be a bother!

The link on the back of the cards doesn’t use the hover colors for links. I’d like it to use the default hover colors that the rest of the site uses for links or to be able to manually set them. If possible.

Thanks for the help.

[Christopher]

Hi there,

Please ad this as well :

a.x-face-button:hover {
    background-color: red;
    color: #fff;
}

Hope it helps.

[MattHoll]

That didn’t work.

The button is on the back of the card, so maybe that’s the thing. This looks like it’s for a hover on the front of the card. I don’t know which language to use to get that on for the button on the back of the card. The card element has a button on the back. I mean that link for that existing element.

See attachment. Where it says register. That’s on the back. Help?

Thanks for any help.

[Christopher]

Hi there,

Please provide us with popup credentials.

Thanks.

[Author]

Posts