Images looking blurry on Dawn 15 (2025) on Mobile

Shopify Discussion
, ,
1

Hey - all the collection images are looking blurry on mobile view. On desktop it looks fine and clear but on mobile it’s super blurry - not looking clear or refined. Can someone help me fix this? Since imagery is super important for our website and most of the consumers would be using mobile.
Thanks in advance!
(This is on the homepage - but potentially could affect all images on mobile view, worried about that)
website:
www.mahru.in
password:
mahru@123

image looking super blurry
image looking super blurry1170×2532 362 KB

image looking super blurry
image looking super blurry1170×2532 265 KB

2

Your theme is obviously modified. Featured collection section should not look like this.

The section uses snippets/card-product.liquid to output product cards, however, image elements there is hard-coded for two products per row on “mobile”.

While yours are shown one per row.

You’d need to fix the sizes parameter. However, if you fix it for this section, it will also force your collection pages to load images two times wider then needed…

Probably, the easiest would be:

  1. to make a copy of the snippets/card-product.liquid and call it, say card-product-featured.liquid

  2. Then modify your sections/featured-collection liquid to use this new snippet – find (several places):

{% render 'card-product',

and replace it with

{% render 'card-product-featured',
  1. edit snippets/card-product-featured.liquid – find (several places):
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"

and replace it with

sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 172 | divided_by: 3 }}px, (min-width: 990px) calc((100vw - 172px) / 3),  calc(100vw - 57px)"

This should be a better match for your current design.

3

Hey Tim, thanks so much for the help - i added the code and it seemed to have worked! if you can double check - would be great! don’t want the site to not function. Also would this work for the Image with Text section too?

IMG_D6471C75D6CC-1.jpeg
IMG_D6471C75D6CC-1.jpeg1170×2532 172 KB

4

Not, that change was only for “featured collection” section.

For “Image with text” you need to open the sections/image-with-text.liquid, find:

{%- capture sizes -%}
  (min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px,
  (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)
{%- endcapture -%}

And make it:

{%- capture sizes -%}
  (min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px,
  (min-width: 750px) calc((100vw - 130px) / 2), calc(100vw - 30px)
{%- endcapture -%}