Docs

[GenjiCreative]

Hello,

I am having an issue with Cards flipping and having the backside contents outside of the card in Firefox for Mac. I am using an image inside of the text field. I scoured the forums but no solutions offered here worked for me.

System: Mac OS X Yosemite 10.10.5
Browser: Firefox 45.0.2
Wordpress Version: 4.5.2
Theme: X Theme 1.2.4 (I am using a child theme)

Please note that I am also having issues in IE 11 with images spilling out of the card.

Website: http://ai-ramen.com/wordpress/

[GenjiCreative]

This reply has been marked as private.

[Friech]

Hi There,

Thanks for writing in! But I can’t replicate the issue on my end. What version of Firefox are you in?

In the meantime, try adding this on your custom CSS

.x-card-outer img {
	width: 100%;
}

Cheers!

[GenjiCreative]

Ok, great! your solution worked and I am not longer seeing that issue. However, now I have a new fairly minor issue in Firefox 45.0.2 on Macintosh running Mac OS X Yosemite 10.10.5 – this issue may be due to the fact that I am using a transparent background. Please see the attached screenshot. Everything looks fine until you rollover, but then I am seeing the contents from the front showing through the background. Is there any way to hide that content after the flip transition is completed?

[Jade]

Hi there,

Please try to add this CSS:

.flipped .front {
    display: none;
}

Hope this helps.

[GenjiCreative]

I applied your code but there is a slight issue because card height is determined by the content. I tweaked your code to below:

.flipped .front .x-face-content {
    visibility:hidden;
}

This way the element retains height but it becomes invisible. This worked for me, but I am not sure about compatibility across different browsers.

[Friech]

Glad you sorted things out. Yup, CSS visibility property is supported by all major browsers.

http://www.w3schools.com/cssref/pr_class_visibility.asp

Thanks.

[Author]

Posts