Hey Shopify Community,
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)
This is the code snippet for the logo in my header.liquid file:
liquid
{% if template != ‘index’ %}
{%- else -%}
{%- endif -%}
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!
How it appears on mobile:
Best regards,
Kai
Website: Aromidy.com
Password: Aromidy2023