Animation Issue across breakpoints

Hi there,
I am created an animation on the base breakpoint that shows a text card move below another one upon mouse hover. In this example, it is the “Our Values” page and when you hover mouse over each one, a card moves below with more detail.
It works fine on the base breakpoint but it is all over the place on the smaller breakpoints.
It doesn’t need the animation on the smaller breakpoints.

Can anyone help me with a solution to removing the animation on the smaller breakpoints and setting the cards out so that they are one after the other on tablet and mobile?

Link here: https://preview.webflow.com/preview/capslehq?utm_medium=preview_link&utm_source=designer&utm_content=capslehq&preview=3b3ba850c06e48ea1bd9116b7cd783bb&pageId=632b10cb54c041730f5d378b&workflow=preview

Many thanks in advance to anyone who can offer some advice.

Best.
Louie


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi Louie, can you check your read-only link? It shows 404 for me.

Sorry about that:
https://preview.webflow.com/preview/capslehq?utm_medium=preview_link&utm_source=designer&utm_content=capslehq&preview=42a97eff2b876a5a2cfcb80a5e0d0452&pageId=632b10cb54c041730f5d378b&workflow=preview

Turning off the animations for smaller breakpoints is easy, just uncheck the smaller breakpoints in Trigger settings in the Interactions panel.

That would still leave you with the text cards behind the original elements though. Two ways around that - either changing the card’s original position in the interaction or pushing them down with 2D and 3D transforms on tablet breakpoint and lower.

You can then adjust the order of the cards by creating areas in your grid and assigning the respective elements to them.