Jump to content

Mobile error on product images in my shop

Go to solution Solved by tuanphan,

Recommended Posts

Hello - I'm hopeful someone may have a solution or fix. I did start a support ticket with SS as they look into my issue.

1. My product images disappear in all 3 of my stores when in mobile. Once I begin to scroll the image fades to white and won't reappear. This only happens in mobile, In desktop the secondary product image fades in (hover effect) and looks fine. I wonder if the issue is the hover effect when in mobile?

2. I uploaded several screen shots from my mobile device.

3. This error/glitch only happens to the live site when tested on iPhone 13, 15 and in Chrome, Safari & Firefox. It does not appear from inside the SS CMS when in mobile view.

4. Would a work around be to turn off the hover effect on my product images? Although I like that effects visual aesthetic.

Many thanks

Andy

www.BalancedTravel.com > Shoppe > IMG_7202.thumb.PNG.37283a1be33c1c9854022a41dbe104c4.PNGIMG_7204.thumb.PNG.2d31b998eb63917174162086ef838799.PNGIMG_7202.thumb.PNG.37283a1be33c1c9854022a41dbe104c4.PNG

IMG_7203.PNG

Link to comment
  • Replies 6
  • Views 987
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...

Thanks. I added that Custom CSS but no luck. I still get the strange image disappearing on my smartphone but looks just fine on desktop. See attached. Is it possible to turn off the roll-over effect on mobile only? So it only stays on a single product image without trying to change?

Screenshot 2024-04-26 at 10.30.08 AM.png

Screenshot 2024-04-26 at 10.29.51 AM (2).png

IMG_2451F9F44265-1.jpeg

Link to comment
  • Solution

Try this CSS under

@media screen and (max-width:767px) {
img.grid-item-image.grid-image-cover {
    opacity: 1 !important;
}
img.grid-item-image.grid-item-additional-image {
    opacity: 0 !important;
}
img.grid-item-image.grid-image-hover {
    opacity: 0 !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

Create an account or sign in to comment

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

×
×
  • 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.