Re: How can I make mobile product images scroll vertically like on desktop?

Solved

How can I make mobile product images scroll vertically like on desktop?

Katharina_be
Excursionist
49 0 8

Hi all,

on my product page the images on desktop are vertical and  customers scroll though the images.

but on mobile the images are next to each other and customers do not scroll though the images automatically.

I now want the same set up on mobile as on desktop.

If you make the desktop screen really narrow it is just as i want it on mobile.

 

Store URL is https://www.betanics.de/products/bio-kurkuma

 

i have basic coding knowledge 

thanks

kathie

Accepted Solution (1)

dmwwebartisan
Shopify Partner
12366 2558 3743

This is an accepted solution.

@Katharina_be 

Please add following css your assets/theme.css bottom of the file.

@media screen and (max-width: 767px) {
.product-medias__thumbnails {display: block !important;}
}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 5 (5)

dmwwebartisan
Shopify Partner
12366 2558 3743

This is an accepted solution.

@Katharina_be 

Please add following css your assets/theme.css bottom of the file.

@media screen and (max-width: 767px) {
.product-medias__thumbnails {display: block !important;}
}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Katharina_be
Excursionist
49 0 8

Hi @dmwwebartisan 

thanks, that worked out.

But now i have the images as slider next to each other and then the same images below.

Could you please doublecheck?

 

Thanks

Kathie

Katharina_be
Excursionist
49 0 8

fixed it:

 

It is a simple 

 

"media screen and (max-width: 767px) { .product-medias__thumbnails {display: block !important;} }"

 

just below the other code

ioanabercean
New Member
5 0 0

Hi, I was wondering if this works for dawn theme?

ioanabercean
New Member
5 0 0

Hi, I was wondering if this works for dawn theme?