Woocommerce photo gallery – margin & blurry thumbnails

Hi @qlucantis,

Thanks for reaching us,

The blurriness of the images might be fixed by using some image optimization plugin. So kindly use the third-party image optimization plugins and let me know if it fixes the issue or not.

Likewise, for adding the spaces in between the thumbnails, Please try adding this CSS inside WordPress Dashboard > Appearances > Customize> Additional CSS and check it once?

.woocommerce div.product div.images .flex-control-thumbs li img{
width:150px;
margin: 5px
}

Let me know if this helps you or not and I will be back.

Regards

Hi,

Many thanks for your suggestion !

I have chosen the following ratio that works well for mobile :

width:65px;
margin: 2px

However when on desktop, the images are obviously ridiculously small, could you kindly advise what would be the responsive CSS to have the same gaps on mobile and desktop ?

Kind regards,

Quentin

Hi @qlucantis,

Please try adding this CSS inside WordPress Dashboard > Appearances > Customize> Additional CSS and check it once?

.woocommerce div.product div.images .flex-control-thumbs li img{
  width:150px;
      margin: 5px;
}
@media screen and (max-width: 768px){
    .woocommerce div.product div.images .flex-control-thumbs li img{
    width:100px;
margin: 2px;
}
}

Let me know if this helps you or not and I will be back.

Regards

This worked very well many thanks for all the help!

Have a great day,

Quentin

Hi @qlucantis,

Glad to hear that it worked for you. Let me know of other queries in the future and I will be back.

Also, if you like the Cenote theme, you can leave the review of the theme here: https://www.ads-software.com/support/theme/cenote/reviews/#new-post

Regards