Baseline Theme – how to disable image hover ONLY on mobile

[MJ82]

Hello, I wish to disable image hover on all products on mobile view ONLY.

Any ideas how to do this? I wish to keep it for desktop but disable for mobile.

Here is my store URL, thanks: https://contrakidsmutiny.com/ 

[Mehran_Ali]

Hi @MJ82 

You can acive this by adding this CSS code:
You just need to follow these steps:

1) Go to the Online Store
2) Edit Code
3) Find theme.css / base.css

And past that CSS Code:

@media(max-width:768px){
   .product-item-hover {
      display: none !important;!i;!;
   }
}

I hope this solution works for you!
If it does, please Like It and Mark It As A Solution, or support me by Buying Me A Coffee to keep me going!

[MJ82]

Thanks, this didn't work though. Any suggestions for how to make it work?

[Mehran_Ali]

You wanted to remove the product card hover image right ?

[MJ82]

Yes thanks, I wanted to remove it only on mobile. I added your code correctly but it doesn't remove the product hover function on mobile after saving. I am not sure why it hasn't worked.

[Mehran_Ali]

ok the code is working fine in the Dev tools removing the hover image 

if it doesn't work for you I need to investigate the issue for that I need collaboration code so I can check why this code is not working 

[MJ82]

Sure, can you send me a private message and I can share with you access? Or let me know how to proceed, thanks.