How to add animation from desktop to MOBILE

[CreatorTim]

Hey guys, I have an issue with the animation for collapsible content. I’ve added a smooth animation for expanding the hidden content, and it works fine on desktop. But how can I get it to work on mobile?

When I view it in the Shopify editor on mobile, the animation is still there, but when I open the store on an actual mobile device, it doesn’t work.

Here’s the code for the animation (I added it to base.css):

.accordion details::details-content {

display: block;

margin-inline: 2rem;

block-size: 0;

overflow: hidden;

transition-property: block-size, content-visibility;

transition-duration: 0.3s;

transition-behavior: allow-discrete;

transition-timing-function: ease-out;

}

.accordion details[open]::details-content {

block-size: auto;

block-size: calc-size(auto, size);

}

And here’s my store URL: https://1049xn-ya.myshopify.com/products/editing-masterclass

(Just scroll all the way down; the collapsible content is there.)

Thanks a lot, I appreciate any help!
Tim