Product Catalogue Thumbnails Blurry

[melissa_232]

I’ve searched high and low through the forum here and all over the Woocommerce site and have tried so many different things - nothing is working! I have currently set the main image width to 600, thumbnail width to 300 and 1:1 thumbnail cropping in the WC display product settings. The trouble I’m having is that the product images display perfect on the product page and “some” of them display perfect on the shop/product catalogue page, but on a mobile all the thumbnails in the shop are blurry. I believe it’s a theme issue or a setting I haven’t worked out how to edit??? Any help would be great.

[thai]

Hi There,

Please try adding this custom CSS under Theme Options > CSS:

.woocommerce li.product .entry-featured img {
    min-width: inherit;
}

Hope it helps

[melissa_232]

Just added it in - no change and hasn’t solved the issue. Anything else I can try?!

[rad]

Hi Melissa,

May I know which device you’re viewing it? If the image is smaller than the device width where it’s being viewed, it will be blurry since it’s going to stretch. I recommend changing the image size equal to or greater than your mobile device’s screen width. Or perhaps, doubling the size of the 300 (600) to cover retina displays as well.

Please check this https://www.sitepoint.com/support-retina-displays/

Thanks!

[melissa_232]

PERFECT! Yes it was on an iPhone and Macbook Pro and iPad - makes sense.

Thanks for your help

[christian]

You’re welcome. Glad we’re able help.