Why my logo on iphone looks pixelated, but not on android?

Why my logo on iphone looks pixelated, but not on android?

h_vare
Shopify Partner
10 0 1

Im using Dawn theme.
On Android phones, logo looks perfect and not pixelated. On iphone it looks bad. The mobile logo is just a svg image. 

This is my store url: https://artchimiaofc.com/

Reply 1 (1)

Sweans
Shopify Partner
429 89 128

Hi @h_vare,

 

iOS sometimes requires the SVG to be embedded directly into HTML for better quality. Instead of uploading it as a separate file, try embedding the SVG code directly in the theme file.

 

Also,

 

Apply the below CSS in your theme file:

1.Go to your Shopify admin panel.

2.Navigate to Online Store > Themes.

3.Find your theme and click on Customize.

4.Click Actions > Edit code.

5.In the left sidebar, under the Layout directory, select base.css. Add the below code:

 

 

header__logo img { 
    max-width: 100%; 
    height: auto; 
}

 

 

Save the changes.

 

If none of the above work, you could replace the SVG with a high-resolution PNG as a quick fix, though SVGs are preferable for scalability.

 

I hope this helps! If it does, please like it and mark it as a solution!  
If you need further assistance, feel free to reach out!

Regards,
Sweans

- Was my reply helpful? Please Like and Accept the Solution or let me know by Buying me coffee!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me at info@sweans.com regarding any help.
- To know more about me check out www.sweans.com