Jump to content

Fix Image Hover effect on Mobile

By Jeffpdoes, in Customize with code

Go to solution Solved by Square_Ace,

Recommended Posts

Jeffpdoes Level 3

Jeffpdoes

Posted
Posted

Site URL: http://www.jeffpdoes.com/store

I'm having an issue with my site's Store Page.

The default for the Store Page is a hover effect on product images, which fades to the second product image.
On the Product Page, there is a setting to turn off hover (which I have done), but the Store Page does not offer this option.
According to SquareSpace this Hover effect should automatically turn off when viewing the page on mobile (for obvious reasons related to the touchscreen). 

The problem I am having is that my browsers (Safari & Chrome on iphone 12 mini, and a newer iphone) are trying to load the hover effect on mobile and photos are fading out and disappearing, and reappearing as I scroll down the page.  The overall effect is a very unimpressive/unprofessional website design.

Squarespace hasn't given me much help beyond "It's not supposed to do that on mobile."

Is there some code I could add to the page to turn off the hover effect for images on mobile more deliberately?

Any other suggestions?

  • Replies 2
  • Views 413
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Jeffpdoes
Jeffpdoes

Yes.  Turned off the hover effect for mobile and desktop, which I much to prefer to the problem I was having on mobile.  Thank you.

  • Solution
Square_Ace Level 8

Square_Ace

Posted
  • Solution
Posted

Hi try adding this custom CSS: 

.grid-image-wrapper.has-hover-img img {
  &:first-child {
    opacity: 1 !important
  }
  &:not(:first-child) {
    display: none !important;
  }
}

I hope that helps.

Andrew

Square Ace

Enhancing Squarespace websites for over a decade. I am an expert in writing custom code for the Squarespace platform.
Tailor-made, reusable solutions to your problems, whether it's styling, layout or functionality.
Maverick Squarespace Designers, I'll be your Goose. If your tools are holding back your creative vision, maybe I can help.
I also build useful plugins for Squarespace (with some really positive reviews) including the popular high-quality video background plugin.

  • 3 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources