[raoul_k@hotmail.co.uk]

Hey, I have a couple of issues with my header.

1. The picture quality of my logo is poor even though I am uploading a high quality picture into Theme Options > General > Logo. The picture is high quality, however when I view it on the website it looks blurry. The impact is much worse on mobile. My mobile logo looks too small and is very blurry, even though I am following the recommended image size for mobile of 50px height. Please can you advise how best to upload a logo that doesn’t lose it’s quality when added to the website for both on desktop and mobile?

2. The header on my mobile is too big. It is a good size on desktop but too big on mobile. How can I reduce the header size just for mobile? If this isn’t possible, how can I adjust the header size for both desktop and mobile? If you could post some additional css to use that would be great

My website is histreetdelivery.com

Thanks!

[Althemist]

Hello raoul_k@hotmail.co.uk,

Sorry for the late reply.

1. Could you, please give us a link where we can see the problem “live”?

2. If you have a dedicated mobile logo, the header will only take 80px of the screen height. If you give us a link we may be able to provide some directions.

[raoul_k@hotmail.co.uk]

Hey, that’s fine, hope you and your team are all okay – I saw the covid message.

On 1. I included the link in my previous message – http://www.histreetdelivery.com. If you inspect the homepage on mobile version you can see the quality is worse compared to the icons and the text on that page. This is because I need to shrink my logo to approx. 140px length – otherwise the logo cannot fit on the same row as the shopping cart & search icons. Is there a way you know of to shrink my logo to 140px length without reducing quality.

On 2. Is it possible to reduce the header to 70px height?

Also, you’ll see my logo is not in at centre height in the header, it’s at the top. Please can you advise how I can make sure the logo is in the centre of the header height?

Thanks

[Althemist]

Hello raoul_k@hotmail.co.uk,

1. Your mobile logo is 138x28px. As I alredy explained, the recommended height is 50px.

Also, you main logo is so blurred, it would never look good on any device.

Original image size and quality:

2. No, I am afraid that would not be possible. 80px is just 9% of a modern mobile screen size. This is the sanitary minimum in order to protect the layout and all possible/optional content in the header.

[Author]

Posts