Blurry Images on browse all but not on the actual item

[BrittanyRenee]

When I go to my website and go to "shop all" or one of the product categories i.e. "dresses" and am browsing multiple items the photos are blurry like the first set of images here. When I click the item and go into that specific product the images are nice and clear like they are supposed to be as you can see in the bottom photo. Any idea why this is happening or how to fix it? Website is www.dawnandrenee.com if you are willing to take a look. Thank you! 

[ExpertRookie]

Hi @BrittanyRenee 
Just checked your store as I see the images showing normally.

[Guleria]

Hello @BrittanyRenee ,

This is because in collection pages the size of images is resized with code.
I suggest once check in the collection settings page, Is there any option available to change the image size ?

If not then you need to go with a developer and change the size of images manually. 

Thanks

[Litos]

Hi @BrittanyRenee,

Please go to Actions > Edit code > product-card-grid.liquid file, find 'grid-view-item__image-wrapper' and change code here:

Code:

<img id="{{ img_id }}"
              class="grid-view-item__image lazyload"
              alt="{{ preview_image.alt }}"
              src="{{ preview_image | img_url: 'master' }}">

Hope it helps!