I am building a site for client that has an animation on the landing page which plays on hover, but I would like it to play automatically on mobile. I tried adding media queries to my css for the animation, but when I did the animation just disappeared. The site is: https://apricots-glockenspiel-bp3w.squarespace.com password: hjz. The code I used is:
@media screen only and (min-width: 951px) {#block-yui_3_17_2_1_1677692883512_13151 {background-image: url("https://static1.squarespace.com/static/639deed3983f0a5c484c8891/t/63ffa436d602ff11286533c3/1677698110235/Untitled_Artwork+29.png");
background-size: cover;
}}
@media screen only and (min-width: 951px) {#block-yui_3_17_2_1_1677692883512_13151:hover { background-image: url("https://static1.squarespace.com/static/639deed3983f0a5c484c8891/t/6407ad3c0a922d6651a42ca5/1678224755080/Untitled_Artwork+4+copy.gif");
}}
@media screen only and (max-width: 640px)
{#block-yui_3_17_2_1_1677692883512_13151 {background-image: url(https://static1.squarespace.com/static/639deed3983f0a5c484c8891/t/6407ad3c0a922d6651a42ca5/1678224755080/Untitled_Artwork+4+copy.gif);
background-size: cover;
}}
Thank you!