Dawn - Image resolution blurry in product grid view

[witherspoony]

Hi, I have changed my product grid to 1 column of products and the product image (portfolio-product.liquid) appears blurry now. All images are uploaded in high res and look great on the product page.

For example https://studioschaumloeffel.com/collections/portfolio-2022?page=3

Product:

Product grid view blurry:

 Could someone help please? Many thanks already, Silvi

[Reena_Soni · Accepted solution]

Hi @witherspoony,

Go to online store > Actions > Edit code 

Search for snippet > card-product.liquid

find "sizes=" lines and replace first part of them with this (see screenshot):

sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 1 }}px, (min-width: 990px) calc((100vw - 130px) / 1), (min-width: 750px) calc((100vw - 120px) / 1), calc((100vw - 35px) / 1)"

This should fix blurry product images.

you just need to replace divide by 4 to 1 https://prnt.sc/feKxPfKbD5Q6 as shown in screenshot.

If helpful then please Like and Accept Solution.

[witherspoony]

Amazing! Yes that worked. Had to replace two "sizes=" lines with your code and the products now show in High res. Thanks so much! 

[bigmountainsguy]

Hi - this worked for photos that are in portrait orientation, but photos in landscape orientation are still blurry. Any advice?

URL: https://shop.bigmountainsguy.com/collections/all-prints