Can I have mobile product photos show stacked instead of in a slideshow?

Site URL: https://thewanderingbison.com/products/sundown-quilt-hand-quilted-sunset-quilt

Hi!
 

I have my individual product photos displayed stacked on my desktop/tablet website, but when it switches to mobile it turns them into a slideshow which severely crops the photos. It makes it look really awkward and it doesn't show my product well. Is there some custom code that I can use to make my individual product page photos show up stacked on mobile?

Thanks!

I solved similar case last month with custom code. Have you solved it yet?

Hello, 

Hope everyone is keeping well. I am also trying to stack the product photos instead of the slide show for mobile.  The code Thuanphan kindly provided worked but unfortunately created a gap at the top of the screen (almost like its waiting for a photo), also the image slide number still remains. Any help would be much appricated!

Cheers,

Emma 

On 9/24/2020 at 4:57 AM, alifelessordinary said:

Hello, 

Hope everyone is keeping well. I am also trying to stack the product photos instead of the slide show for mobile.  The code Thuanphan kindly provided worked but unfortunately created a gap at the top of the screen (almost like its waiting for a photo), also the image slide number still remains. Any help would be much appricated!

Cheers,

Emma 

Can you share link to product in screenshot? I can check easier.

11 hours ago, tuanphan said:

Can you share link to product in screenshot? I can check easier.

https://hexaflexagon-carrot-jmtd.squarespace.com/shop/p/3kj3kw85wy9kg1hvb3z414fqh5sqrj

Password 'thankyou' 

Thankyou Tuanpan! 

On 9/25/2020 at 4:30 PM, alifelessordinary said:

https://hexaflexagon-carrot-jmtd.squarespace.com/shop/p/3kj3kw85wy9kg1hvb3z414fqh5sqrj

Password 'thankyou' 

Thankyou Tuanpan! 

Keep current code

add this code under current code

@media screen and (max-width:767px) {
.tweak-product-basic-item-gallery-aspect-ratio-34-three-four-vertical .ProductItem-gallery-slides:before {
	display: none;
}
}

On 9/25/2020 at 10:30 AM, alifelessordinary said:

https://hexaflexagon-carrot-jmtd.squarespace.com/shop/p/3kj3kw85wy9kg1hvb3z414fqh5sqrj

Password 'thankyou' 

Thankyou Tuanpan! 

12 hours ago, tuanphan said:

Keep current code

add this code under current code

@media screen and (max-width:767px) {
.tweak-product-basic-item-gallery-aspect-ratio-34-three-four-vertical .ProductItem-gallery-slides:before {
	display: none;
}
}

 

Thank you Tuanpan! This has worked to push the images up, however you can still use the slide feature from the top image. Can this be removed? 

Thanks Emma 

@media screen and (max-width:767px) {
.ProductItem-gallery-current-slide-indicator.enable-on-first-image-load.enabled {
    display: none;
}
}

On 9/29/2020 at 8:55 AM, tuanphan said:

@media screen and (max-width:767px) {
.ProductItem-gallery-current-slide-indicator.enable-on-first-image-load.enabled {
    display: none;
}
}

 

Hi Tuanphan, 

Appreciate all your help, thank you. That worked to removed the number of the slide, but the slide feature is still enabled if the customer accidentally swipes. 

Cheers

Emma

On 10/1/2020 at 3:58 AM, alifelessordinary said:

Hi Tuanphan, 

Appreciate all your help, thank you. That worked to removed the number of the slide, but the slide feature is still enabled if the customer accidentally swipes. 

Cheers

Emma

Try adding this to Home > Design > Custom CSS

@media screen and (max-width:767px) {
img.ProductItem-gallery-slides-item-image, .ProductItem-gallery-slides-item {
    pointer-events: none !important;
}
}

Hello I am having this same issue! The code is not working : ( I just want my product images to be stacked and not in a carousel. I currently have stacked on desktop but it changes to a carousel on mobile! Please help!

On 10/2/2020 at 2:32 AM, tuanphan said:

Try adding this to Home > Design > Custom CSS

@media screen and (max-width:767px) {
img.ProductItem-gallery-slides-item-image, .ProductItem-gallery-slides-item {
    pointer-events: none !important;
}
}

 

I was wondering if you could look at this again. None of the code seems to work to get the products stacked on mobile. I've tried everything. Please help!

6 hours ago, N8Steele said:

I was wondering if you could look at this again. None of the code seems to work to get the products stacked on mobile. I've tried everything. Please help!

 

Can you share link to product? We can check easier

On 11/9/2020 at 2:17 AM, tuanphan said:

Can you share link to product? We can check easier

Yup! https://www.sdgapparel.com/jesusdiedcollection/p/oxfo98v4q4xyr1kwo0obtiodb8u956-ht8aa-cyxar

Really appreciate the help I've been trying to get these images stacked on mobile for a while now!

6 minutes ago, N8Steele said:

Yup! https://www.sdgapparel.com/jesusdiedcollection/p/oxfo98v4q4xyr1kwo0obtiodb8u956-ht8aa-cyxar

 

Really appreciate the help I've been trying to get these images stacked on mobile for a while now!

And the password is SQ1234

18 hours ago, N8Steele said:

And the password is SQ1234

Add to Home > Design > Custom CSS. Then save & reload your site

@media screen and (max-width:767px) {
.ProductItem-gallery-slides-item {
    position: static !important;
    height: auto !important;
    visibility: visible !important;
}
img.ProductItem-gallery-slides-item-image {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
}
.ProductItem-gallery-slides:before {
    padding-bottom: 20% !important;
}
.ProductItem-gallery-current-slide-indicator.enable-on-first-image-load.enabled {
    display: none;
}
}

9 hours ago, tuanphan said:

Add to Home > Design > Custom CSS. Then save & reload your site

@media screen and (max-width:767px) {
.ProductItem-gallery-slides-item {
    position: static !important;
    height: auto !important;
    visibility: visible !important;
}
img.ProductItem-gallery-slides-item-image {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
}
.ProductItem-gallery-slides:before {
    padding-bottom: 20% !important;
}
.ProductItem-gallery-current-slide-indicator.enable-on-first-image-load.enabled {
    display: none;
}
}

 

Thank you so much for the help! It seemed to kinda work....

On a mobile device I can still swipe through photos and the top photo is really far away from the header!

Please help!

Thanks!

try edit 20% to 1% in above code

2 hours ago, tuanphan said:

try edit 20% to 1% in above code

Sweet! That worked to get the images closer to the header but I the slider still works 😞

On a mobile device when I swipe across the image the image disappears and gets slid over. Is there any way to disable the slider?

On 11/17/2020 at 11:12 PM, N8Steele said:

Sweet! That worked to get the images closer to the header but I the slider still works 😞

 

On a mobile device when I swipe across the image the image disappears and gets slid over. Is there any way to disable the slider?

Hi. Sorry for the delay. Have you solved it yet?

9 hours ago, tuanphan said:

Hi. Sorry for the delay. Have you solved it yet?

No I haven't been able to do the code to disable the slider 😞 Do you have any sugggestions?

On 11/19/2020 at 1:12 AM, tuanphan said:

Hi. Sorry for the delay. Have you solved it yet?

Hello I was just checking again to see if maybe you could help me.

Thanks!

On 11/23/2020 at 6:43 AM, N8Steele said:

Hello I was just checking again to see if maybe you could help me.

 

Thanks!

Hi. Sorry, just had a sick. Do you still need help on this?

Hey Guys,

Can I have exactly the opposite solution?
 

- Stacked version on desktop (this is the current setup)
- Slideshow on mobile

https://www.tras.hu/shop/leaiijacket pass: tras23

Many Thanks!