Jump to content

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

Recommended Posts

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. 

IMAGE 11-20-20 AT 10.51 PM.jpeg

Link to comment
  • Replies 8
  • Views 924
  • Created
  • Last Reply
  • 2 weeks later...
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;
    }
  }
}

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.