How to enable horizontal carousel on the zoomed lightbox view on both desktop and phone?

Store Design
1

I got some code to reduce the HUGE size of the images in the zoom feature on product pages…

I had to add this code to Theme.liquid… and that worked.

.product-media-modal__content.color-background-1.gradient, .product-media-modal__content.color-background-1.gradient img { padding-left: 0; max-height: 90vh; padding-right: 0; } .product-media-modal__content.color-background-1.gradient img { max-height: 90vh; object-fit: contain; width: 95vw; }

Now, images are full screen which is good… but on desktop users can vertically scroll to move from one image to another… on phone, it does not scroll at all…

Can I add a little bit of CSS to make it consistent and to have it horizontally scrolling? one by one? like normal carousel of images that are viewed full screen? maybe with arrows on each side?

Tap goes to next photo? or horizontal scroll could work too…

2

Hi
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

3

Of course! I can’t believe I did not put the URL…

https://www.futurisnowshop.com/products/linea-5-rectangular-geometric-necklace-copy

Thanks for your help!