How To Change Header Logo From Being Blurry -- Dawn Theme

Aromidy
Tourist
11 0 1

Hey Guys

So I've encountered an issue with my mobile logo's image quality on my Shopify store. Despite using a high-resolution image, the logo appears pixelated on mobile devices. I've tried adjusting the img_url filter size and ensured the CSS isn't stretching the image beyond its natural dimensions, but the problem persists.

Here are the details:

  • The logo is clear on desktop.
  • The issue only appears on mobile, regardless of the device or browser used.
  • I'm using an image with sufficient resolution for Retina displays. (image size 500 x 300px)

    Aromidy_0-1705099077777.png

This is the code snippet for the logo in my header.liquid file:

 

Aromidy_1-1705099120109.png

 

And the corresponding CSS:

 

css
.header-logo-mobile { display: block; /* shown on mobile */
margin: 0 auto; /* centers the logo */
max-width: 100%; /* ensures the logo is not wider than its container */
height: auto; /* maintains aspect ratio */ }
 

Any insights on why this could be happening or further steps I could take to resolve this issue would be greatly appreciated. Thank you in advance for your help!

This is the reason google is giving me btw: 

Aromidy_0-1705099345300.png

Reply 1 (1)

BSS-Commerce
Shopify Expert
3376 447 494

Hi @Aromidy ,

According to the images you provided, I see that the expected size in the lighthouse report is 150x90, so you need to change the logo size on mobile.

Please replace the following lines of code:

<img src="{{ settings.mobile_logo | img_url: '110x'}}" alt="{{ shop.name | escape }}" class="header-logo-mobile">

the following lines of code:

<img src="{{ settings.mobile_logo | img_url: width: 150, height: 90}}" alt="{{ shop.name | escape }}" class="header-logo-mobile">

 

You can learn more about liquid's img_url here: https://shopify.dev/docs/api/liquid/filters/image_url

Hope it helps @Aromidy 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development