Disable Hover effect on shop page so that prices always show while using a mobile device

On the shop page of the hyde template, prices will show when you hover over the corresponding image. I would like to disable the hover effect so that the price will always be displayed on mobile devices. 

This is what I have:

@media only screen and (max-width: 768px) { .product-price { 
  pointer-events: none;
  }
}

I have the mobile breakpoint set to 768px in the site styles section so thats why i used that number. 

Can you share site url? We can help easier

20 hours ago, tuanphan said:

Can you share site url? We can help easier

https://oleander-terrier-ej8b.squarespace.com/

salim1208

14 hours ago, Breezy said:

salim1208

 

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
section.ProductList-overlay {
    opacity: 1 !important;
}
}

13 hours ago, tuanphan said:

@media screen and (max-width:640px) { section.ProductList-overlay { opacity: 1 !important; } }

the price still only shows when you hover 

On 11/24/2020 at 10:52 AM, Breezy said:

the price still only shows when you hover 

Hi. Sorry, just had a sick. Do you still need help on this?

On 12/3/2020 at 12:18 AM, tuanphan said:

Hi. Sorry, just had a sick. Do you still need help on this?

yes please 

On 12/4/2020 at 9:52 AM, Breezy said:

yes please 

i figured it out

@media only screen and (max-width: 768px) { #collection-5fb6f5d912564f05486a4f54 {
.tweak-product-list-mobile-meta-position-overlay.tweak-product-list-meta-position-overlay, .ProductList-overlay, .ProductList-meta {
  opacity: 1 !important;
  visibility: visible !important;
    }
  }
}