Collection Banner Images Blurry On Mobile (Dawn Theme) - Help Appreciated!

[kbroadhurst]

Hi I'm having some trouble with the images on my Collection pages. I am using Dawn theme and the problem I'm having is with the Collection Banner section. I have the box checked to display the Collection Image which looks great on desktop but on mobile the images are blurred. I have tried lots of different variations of image size and resolution but haven't found a solution. Whatever image I use it looks fine on desktop but blurry on mobile. Can somebody help me fix this? 

Here are some examples:

Desktop collection banner with image displaying fine. 

Mobile version with image blurry. 

Desktop image ok


Mobile image blurry.

As I mentioned I have tried various image ratios, sizes and resolutions but it seems to happen no matter what. Can anybody help me with this? 

My website is still in development but the link is - https://18f0de-2.myshopify.com/

Any help very much appreciated!

[Dan-From-Ryviu]

Hi @kbroadhurst 

You can add this code to Custom CSS in Online Store > Themes > Customize > Theme settings 

@media (max-width: 749px) {
html .collection-hero__image-container img {
    object-fit: contain;
}
}

[kbroadhurst]

Hi @Dan-From-Ryviu thank you for taking a look at this for me. Unfortunately this hasn't worked and the images are still coming out as blurry on mobile. Screenshots below. Do you have any other ideas I could try?

[kbroadhurst]

Hi just wondering whether you had any further ideas on how I can stop the blurry mobile images on my collection banners? I tried the code you gave before but it didn't stop the blurryness.

[Dan-From-Ryviu · Accepted solution]

Hi @kbroadhurst 

You can open main-collection-banner.liquid file in Online Store > Themes > Edit code, remove 3 those line of codes, save file and check again 

            {%- if collection.image.width >= 165 -%}{{ collection.image | image_url: width: 165 }} 165w,{%- endif -%}
            {%- if collection.image.width >= 360 -%}{{ collection.image | image_url: width: 360 }} 360w,{%- endif -%}
            {%- if collection.image.width >= 535 -%}{{ collection.image | image_url: width: 535 }} 535w,{%- endif -%}

[kbroadhurst]

Yes! That worked 😀 Thanks so much. 

[Dan-From-Ryviu]

You are very welcome!