Docs

[innovatethehustle]

Hi,

I am hoping to use the Card element but I don’t want to have a back side or for it to flip, just a one-face card. Is this possible?

Thanks.

[Zeshan]

Hi there,

This isn’t possible out of the box. But it can be achieved with custom CSS code. To do so, first add a class of no-flip under Class field of your card element settings (see: http://prntscr.com/7qeolc). Then add following CSS code under Custom > JavaScript in the Customizer:

.x-card-outer.no-flip .x-face-outer.front {
    transform: none !important;
    animation: none !important;
    z-index: 2 !important;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
}

.x-card-outer.no-flip .x-card-inner {
    transform: none !important;
    animation: none !important;
}

.x-card-outer.no-flip .x-face-outer.back {
    transform: none !important;
    animation: none !important;
    z-index: 1 !important;
}

Hope this helps. 🙂

Thank you.

[bgodnik]

I followed the directions above and double checked that the code I pasted into the global Customizer > Custom > JavaScript is the same as the code above. I added “no-flip” in the Class field to some of the cards at http://omaxgardnerfoundation.com/cornerstone-draft/ but they still flipped on rollover. I also tried using “.no-flip” and “.x-card-outer.no-flip” in the class field but nothing seems to help. Can you please let me know if I’m doing something wrong or if there might be a mistake in the code above?

Thanks,
Bob

[Nico]

Hi There,

Would you mind sharing us your admin credential so we could take a closer look on your setup.

Don’t forget to set it as private reply.

Thanks.

[bgodnik]

This reply has been marked as private.

[Rue Nel]

Hello There,

Sorry for the confusion. We have edited your page in Cornerstone, turned on the advance controls and inserted no-flip class (http://prntscr.com/8twhf5). We also added the following custom css in the settings tab, Settings > Custom CSS

.x-card-outer.no-flip .x-face-outer.front {
    transform: none !important;
    animation: none !important;
    z-index: 2 !important;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
}

.x-card-outer.no-flip .x-card-inner {
    transform: none !important;
    animation: none !important;
}

.x-card-outer.no-flip .x-face-outer.back {
    transform: none !important;
    animation: none !important;
    z-index: 1 !important;
}

We have remove it from the custom js section in the customizer and added right in Cornerstone. Right now, the card element no longer flip in the page http://omaxgardnerfoundation.com/cornerstone-draft/

If you need anything else we can help you with, please let us know.

[bgodnik]

Thank you very much.

[John Ezra]

You’re most welcome!

[Author]

Posts