Streaming live at 10am (PST)

Flip Card text is disappearing and inverting on mobile screen


#1

I'm having a weird behavior with a flip card. I've got it working on a desktop dimension screen, and it looks great.

https://preview.webflow.com/preview/angel-health?preview=7d1d098bf825153b6b01102d7f8f50bb

However, when I jump to a mobile view. Two things happen. In horizontal, the back card disappears. And when I go to a vertical view, the text on the back card inverts.

I've checked whether one of them was accidentally hidden, but to no avail. Any ideas?


#2

Hi @mcoats, could you provide a published link as well as screenshots if possible? Thank you!


#3

Hi @mcoats looks like you added a few styles on mobile to your ahacardside back style which are causing the issues:

  1. Revert the style change on your ahacardside back on mobile landscape to keep your transform style:

  1. That should resolve your mobile portrait issue as well since you added a rotation on the x-axis on mobile instead of on the y-axis (flipping it upside down instead of around :slight_smile: )

  2. I noticed that you had auto focus checked on your form field which causes your page to load focused on that form field, was that your intention? If not, you can fix that in the form field settings:

Please let me know if this helps or if you have any additional questions I'm happy to help further. :slight_smile:


#4

Big thanks! That fixed it :slight_smile:

Sorry to have missed it on my end!


#5

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.