Squarespace 7.1 Mobile - How to change product gallery style to "stacked" on mobile?

Hi everyone!

Just moved to 7.1 but realised that there's no "stacked' option in mobile for the images in all product pages.
The options available are restricted to carousel and full square size.
I was hoping to find some answers for this. I'd very much appreciate it! Thank you in advance.

Works like a charm, thank you so so much!

Thank you so much!!  Love the stacked 🙂

This is a great solution, thank you!

There is a weird problem on my website though. Where the first image should be, there is a blank area inserted before it. The blank area is the size of an image, so when you first open the page, it appears blank. You do not see any images unless you scroll down.

I have tried tweaking it, but with no luck. Do you have any ideas @tuanphan?

Here is my product page...

https://nostalgique.com.au/gallery/p/nostalgique-book

I have finally worked out the problem. I will add some detail here incase anyone else hits the problem.

The above changes were conflicting with other code in my CSS that allows me to have different shaped images on my website, ie landscape and portrait formats.

This is the other conflicting code in my CSS...

.ProductItem.hentry.tag-portrait .ProductItem-gallery-slides:before {
  padding-bottom: 150%!important;
}

To address the conflict, I simply added a new condition to only apply the change when not on a mobile screen...

@media screen and (min-width:768px) {
.ProductItem.hentry.tag-portrait .ProductItem-gallery-slides:before {
  padding-bottom: 150%!important;
}
} 

That seems to have fixed it!

This works for me, but you can still swipe the images and it looks odd. any way to prevent them from swiping?

On 11/18/2023 at 10:43 PM, danegrady said:

This works for me, but you can still swipe the images and it looks odd. any way to prevent them from swiping?

Try this CSS under

section.ProductItem-gallery {
    pointer-events: none;
    user-select: none !important;
}