Images looking blurry on Dawn 15 (2025) on Mobile

[snk729]

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

[tim · Accepted solution]

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',

3. 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.

[snk729]

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?

[tim]

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 -%}