Product carousel arrows get lost on mobile

Hello,

The side arrows on my product carousel disappear for mobile resolution and I'd still like to keep them (see attached). Is there any way I could do that? Couldn't figure out how.

My WIP product page (running on 7.1): https://pelican-chiton-xwy4.squarespace.com/shop/fos-classic

Cheers,

Xavier

Hey @xavier-cusso.

On a desktop, the arrows are the visual cue to let users know that they can click the image to advance the carousel, but that doesn't work on mobile.

On mobile devices, the carousel becomes swipeable; it cannot be tapped to advance it. In the circumstances the arrows could make for a bad user experience by suggesting an action that doesn't work.

That said, if anyone at Squarespace is listening, I'd personally like to see a stronger visual cue on mobile devices, to indicate this is a carousel. Perhaps some dots or dashes along the bottom of the image, or the hint of the other images at the sides.

I am having the exact same problem, it basically renders my webshop useless on mobile. An integrated shop & automatic responsive design were the key reasons I chose Squarespace, but seems like with 7.1 my timing might have been poor. Disappointing! Squarespace folks, please, give us some control back over this display in 7.1!

Hi! I found this answer from @tuanphan and it seems to have given me arrows back to the mobile version, super frustrated here too!

/* Product slide arrows control */
@media screen and (max-width:767px) {
.ProductItem-gallery-carousel-controls {
    display: flex !important;
}
/* arrows background */
.ProductItem-gallery-carousel-controls * {
    background: white;
}
.ProductItem-gallery-carousel-controls>div {
    justify-content: center !important;
}


https://forum.squarespace.com/topic/157637-product-carousel-slideshow-ui-and-navigation-arrows-missing-on-mobile-in-71/