Vector logo issues on mobile device.

entranced
Excursionist
28 0 4

I finally decided to replace the blurred .png logo with a vector based one on our site.

It seems nice on the desktop but on mobile devices the logo looks terrible. The font does not seem to be loaded correctly in the svg file and the entire logo looks compressed.

 

On desktop it looks fine:

web.JPG

 

On mobile device it looks awful:

phone.JPG

 

 

This is what I have done:

1. Uploaded a .svg-logo to assets.

2. Edited the code as follows

 

In the header.liquid I removed this code...

<img src="{{ section.settings.logo | img_url: image_size }}" srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x" alt="{{ section.settings.logo.alt | default: shop.name }}" itemprop="logo">

 

and replaced with this magic...

<p><a href=""><img src="https://cdn.shopify.com/s/files/1/0412/8843/3815/files/logo.svg?v=1634737206" alt="" style="display: block; margin-left: auto; margin-right: auto;" /></a></p>

 

Venture theme

Link to site 

 

Are there any tips on how to tweak this so the logo looks okey on the mobile as well?

Thanks.

 

 

 

 

 

 

 

 

 

 

 

Replies 0 (0)