Woo Single Product Thumbnail Horizontal Scroll

[melvin wang]

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

[David]

Hi there,

can you disable your cache plugin so i can see if we can fix that.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[melvin wang]

Hi David,

The only thing related is Autoptimize and i didnt have any other cache plugn. I disabled Autoptimize already.

Thank you.

Regards,
Melvin

[David]

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?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[melvin wang]

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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[melvin wang]

Hi David,

Noted. That’s ok.

Still thankful on your effort to help.

Cheers

Regards,
Melvin

[David]

Sorry we couldn’t resolve this!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts