Problems with WooCommerce Product image thumbnails in Mobile view

Hi,
Can you give me some pointers on how to fix the product image thumbnail display on my site. The 400px size seems to work OK but when you go smaller the thumbnails are crashing into each other with no space between the two rows.
I’m sure there is a simple CSS fix for this but finding where to place the css is proving to be tricky.


if you make the browser as small as possible you will see the issue.
Thanks for your help
Cheers
David

Hello David,

Thanks for writing in!

First thing: You have added a custom CSS in your child theme’s style.css that adds a left margin to the product thumbnails. You have added this:

.flex-control-nav.flex-control-thumbs li {
        margin-bottom: .5em;

It needs to have a closing } curly brace. I suggest that you update the code and use this instead:

.flex-control-nav.flex-control-thumbs li {
        margin-bottom: .5em;
}

This custom css will add a bottom margin to the product images when the screen size has a maximum of 1199 pixels or less. In your custom CSS, you must also include that when the screen size goes smaller that 767 pixels, the left and right margin of the product images will have to be the same by adding:

.flex-control-nav.flex-control-thumbs li {
        margin-left: 0.5em;
        margin-right: 0.5em;
}

To learn more about CSS margin property, please check this out:

Hope this helps.

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