How to stop woocommerce product thumbnails in the gallery buncing up on mobile?

Support
#1

I have inserted the following CSS to make the gallery thumbnails, beneath a product, not bunch up on desktop… which works very well. However on mobile, the thumbnails still bunch up and do not appear aligned. The website is www.thebrexitbiscuit.co.uk

.single-product .flex-control-nav.flex-control-thumbs li {
float: left;
width: 18.6%;
margin-bottom: 8px;
padding: 3px;
background: transparent;
border: 1px solid #eee;
margin-left: 0;
margin-right: 0.5em;
}

.single-product .flex-control-nav.flex-control-thumbs li:nth-child(5n+5) {
margin-right: 0 !important;
}

Thanks!

#2

Hi @Confectioneries,

Thank you for reaching out to us. For mobile devices you can use the following code:

@media screen and (max-width: 979px) {
    .single-product .flex-control-nav.flex-control-thumbs {
        display: flex;
        flex-wrap: wrap;
    }

    .single-product .flex-control-nav.flex-control-thumbs li {
        flex: 1 1 30%;
    }
}

Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Don’t forget to clear all caches including your browser’s cache after adding the code. Hope this helps!

1 Like
#3

Thank you. I do appreciate the help.

#4

You’re welcome.

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.