My back card text is showing on the front side of the card

Design help Animations & Interactions
1

Hello,

I’m having troubles with the layout of my card and animating my flipping cards. Everything is perfect in the desktop breakpoint, however when I go to a smaller breakpoint I notice a few issues. Firstly, the card no longer flips when I go to a smaller screen.

Secondly, the back card text shows on the “front card” but when I position the “grid-div” and “card back” to absolute, my front card text disappears.

How do I have my layout be the same as the desktop view, where the card flips and the front and back text are in the right position. Any help is appreciated!

Here is my public share link:

2

Hi there,

To set up a proper card flip layout, here’s how to configure your card elements:

For both card front and back images:

  • Set Display to “Block”
  • Set Position to “Absolute”
  • Set Top position value
  • Center the images by setting both left and right margins to “Auto” in the Card wrapper Div block

For the flip animation:

  • Navigate to Effects > 2D & 3D transforms > Transform settings
  • Set Backface to “Hidden” for both front and back cards
  • Configure the back card’s transform properties with a 180-degree rotation on the Y-axis

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

4

What page you’re having the cards on?