Disable custom hover effect on mobile devices

Highlighted
Shopify Partner
7 0 0

Hi guys! Website is japoni.lt

 

So I have this code in my theme.scss:

 .collection-grid-item  {position:relative; overflow:hidden;
    img {display:block; width:100%; filter:grayscale(1); @include transition(all ease-out 0.5s);}
  
     &:hover img {filter:none;}
  }
  
  

Which basically just disables grayscale effect on the collection images. And because hover doesn't work that well with mobile devices, I want to disable it but I just can't seem to find the right way to do it. 

 

Any help would be appreciated.  Thank you!

0 Likes
Highlighted
Shopify Expert
10 0 0

Hi

Your code is incorrect 

The actual code to fix is : 

.collection-banners .collection-grid-item img {filter: grayscale(0);}
Best Regards, Adil Bhat Shopify Expert - Front End Developer - E-commerce Specialist
0 Likes
Highlighted
Shopify Partner
7 0 0
Hi, I don’t really see how your code is supposed to fix anything, can you please explain?
Because your code is just shorter version of mine without any hover included whatsoever, and I need hover effect to be active on desktop devices and inactive on mobile devices. Thanks
0 Likes
Highlighted
Shopify Expert
10 0 0

Hi

Just put this code at the end of theme.scss.liquid file

Make sure to take backup of your theme before any edits

Go to admin panel > Online Store > Themes > Click on Action Bar > Edit Theme > Open Assets Folder > and Open theme.scss.liquid file and put the code at the end of the file and hit save ..

Best Regards, Adil Bhat Shopify Expert - Front End Developer - E-commerce Specialist
0 Likes
Highlighted
Shopify Partner
7 0 0
I am sorry but there is a possible misunderstanding here.
I know how to edit code, and your code still doesn’t include any hover for my images. Could you please explain how your code is supposed to fix it? As far as I understand, your code will just out grayscale effects without any hover
0 Likes
Highlighted
Shopify Expert
10 0 0

Just go ahead and use this code, i tested it before giving it to you so use it , it does not require hover property to be included.

Best Regards, Adil Bhat Shopify Expert - Front End Developer - E-commerce Specialist
0 Likes
Highlighted
Shopify Partner
7 0 0

ahh.. now I understand what you did.

I just needed to add property for mobile devices 

@media only screen and (max-width: 425px) 

with your code. Now it all works. Thanks man

0 Likes
Highlighted
Shopify Expert
1381 111 197

Hi @,
1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss.css->paste bellow code in bottom of file
@media only screen and (max-device-width: 480px) {
.collection-banners .collection-grid-item img {
filter: none !important;
}
}

0 Likes