Make gifs visible on mobile version

bakyboy
Excursionist
78 0 2

Hey, how can I make gifs work on mobile version of my site?

im using the "Showcase" theme, I have gifs on my home page and want it to work on mobile as well. thanks 

Replies 6 (6)
AibekGrowave
Shopify Partner
319 48 153

You can use this code:

@media (max-width: 767px) {
.template-index .product-block .image__second {
     opacity: 1;
  }
}

Hope that helps you.  

bakyboy
Excursionist
78 0 2

hey, where exactly do I insert it?

AibekGrowave
Shopify Partner
319 48 153

At the end of style.css file

bakyboy
Excursionist
78 0 2

thank you! does that mean that the main picture of a product \ collection must be a gif right? it can't be the second picture (like on the desktop with the hover effect)

AibekGrowave
Shopify Partner
319 48 153

The style that we sent you will always show gifs on mobile phones. Previously, a picture was shown, and on the desktop, when you hover, a gif is shown. But it didn't work on your mobile phone. Now you will always show GIFs on your mobile phone.

bakyboy
Excursionist
78 0 2

if you can see on my site https://century8mm.com
down on the home page you can see a product that changes to a gif
but on the mobile version it doesn't change to the gif (second product picture)