Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

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


Recommended Posts

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!

Link to comment
  • 2 weeks later...
  • 2 months later...
  • 1 month later...

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 

Screenshot 2020-09-23 at 23.54.52.png

Link to comment
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.

Link to comment
On 9/25/2020 at 4:30 PM, alifelessordinary 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;
}
}

 

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

 

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 

IMG_3236.PNG

IMG_3237.PNG

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

 

Link to comment
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

Link to comment
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;
}
}

 

Link to comment
  • 1 month later...
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!

 

Link to comment
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

Link to comment
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;
}
}

 

Link to comment
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!

Link to comment
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?

Link to comment
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?

Link to comment
  • 2 weeks later...
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?

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...