Archived topic
Woo Single Product Thumbnail Horizontal Scroll
7 replies · Started by melvin on October 19, 2020
Hi Team,
Following this guide I'm able to add the CSS for horizontal scroll.
It looks good on the desktop.
However when i view on the mobile [HwaWei P10plus], the "image thumbnail" area seems unable to scroll with a "scroll bar" display like it could at desktop.
The code i use:
.woocommerce div.product div.images .flex-control-thumbs li {
padding: 5px 5px 0 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-flex: 1;
-ms-flex: 1 0 25%;
flex: 1 0 25%;
}
.woocommerce div.product div.images .flex-control-thumbs {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
overflow: auto;
}Could you guide me on how to make the product thumbnail able to scroll like desktop, with a "scroll bar" visible too?
Thank you.
Regards,
Melvin
Hi there,
can you disable your cache plugin so i can see if we can fix that.
Hi David,
The only thing related is Autoptimize and i didnt have any other cache plugn. I disabled Autoptimize already.
Thank you.
Regards,
Melvin
Unfortunately i cannot see what the issue is there, i am not able to replicate it on my dev site. I wonder if the various height images are affecting it?
Hi David,
Thanks for your quick response.
I wonder if the various height images are affecting it?
I've tried to delete all the additional CSS and check, the issue is still same. The image thumbnail scroll is not working still in Mobile. Refer to the video below
Could you kindly have a look?
TQ
Melvin
I am sorry but i can't find a solution for that issue. There is no way to separate the carousel from the thumbnails and they both are affected by the same tap target used for swiping images.
I think that option to make the thumbnails scrollable is no longer viable.
Hi David,
Noted. That's ok.
Still thankful on your effort to help.
Cheers
Regards,
Melvin
Sorry we couldn't resolve this!
