Flip card element not working properly

[jblocke601]

I am having a couple of issues with The flip card element not working properly in Internet Explorer. I created custom flip cards with a picture and text on the front and when the card is flipped it just shows text on the other side. it works fine in other browser except IE. The other issue I’m having is with the flip card on a mobile device. It works great in portrait mode but when you turn it to landscape on your phone the text on top of my photos extends past the boxes. The link to the site is http://lyon.txtbased.com/faq/

[christian]

Hey there,

Regarding the IE issue, there’s bug which will be fixed soon. There’s currently no solution to this.

The landscape issue is because of your custom code.

.one .x-face-outer.front {
    background-color: transparent !important;
    background: url(http://lyon.txtbased.com/wp-content/uploads/2017/06/1.png) no-repeat top center;
}

Your background is narrow. Try adding background-size: cover; so the background image will cover the card area. Since this is not an issue with the Flip Card, regretfully, providing a solution to this would be getting into custom development which is outside the scope of our support.

Thank you for understanding.

[christopher]

Hi there,

Thank you for writing in. The Flip Card Element is not intended to has the flip effect in IE 11 as that browser does not support 3D CSS transitions correctly. On the next release we will fix this by removing the effect completely from IE 11 and it will not have that 3D effect.

Regarding the problem you mentioned on Landscape mobile view, it seems that the text is going out of the boundaries but the boundaries of the card is invisible, you manually added a background which is not big enough to cover the whole container of the card. I added a code temporarily for you to see the difference in the screenshot below:

You have the choices mentioned in the screenshot. If you want to have the first choice kindly add the code below to X > Launch > Options > CSS:

.x-face-outer.front {
    background-size: cover !important;
}

Thank you.