Jump to content

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

Go to solution Solved by tuanphan,

Recommended Posts

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.

Link to comment
  • Solution

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.ProductItem-gallery-carousel-controls {
    display: none !important;
}
.ProductItem-gallery-current-slide-indicator {
    display: none;
}
.ProductItem-gallery-slides-item {
    position: static !important;
    height: auto !important;
    width: 100% !important;
    visibility: initial !important;
}
img.ProductItem-gallery-slides-item-image {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
.ProductItem-gallery-slides:before {
    padding-bottom: 0 !important;
}
.ProductItem-gallery-scroll {
    display: none !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
  • 10 months later...
  • 5 months later...

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

Link to comment

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!

Link to comment
  • 4 months later...
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;
}

 

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
  • 5 months later...

Hi. I was wondering if this post is getting outdated? the code is not working for my site: lucky-rose.com. 

specifically on this page i need to view all my product photos stacked to make sure all information about the product is easy to access. https://www.lucky-rose.com/shop/p/the-lucky-beads-kit-g932s

I tried adding the above code, but it only shows me the first two images stacked and then the rest are hidden somehow. 

Please let me know if anyone knows how to get this working 🙂

Thanks in advance, 

stinne

Link to comment
15 hours ago, stinne said:

Hi. I was wondering if this post is getting outdated? the code is not working for my site: lucky-rose.com. 

specifically on this page i need to view all my product photos stacked to make sure all information about the product is easy to access. https://www.lucky-rose.com/shop/p/the-lucky-beads-kit-g932s

I tried adding the above code, but it only shows me the first two images stacked and then the rest are hidden somehow. 

Please let me know if anyone knows how to get this working 🙂

Thanks in advance, 

stinne

You can use this new code to Custom CSS

@media screen and (max-width:767px) {
.ProductItem-gallery-slides-item {
    position: static !important;
    height: auto !important;
    visibility: visible !important;
    display: block !important;
    animation: unset !important;
}
.ProductItem-gallery-slides:before {
    padding: 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

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.