Blurry Logo on mobile

Sparkling
1

Logo Image (as well as any image in the footer) appears blurry on mobile devices, but looks fine on computer screen.
Anyway to solve this?

2

Hi @codeoner,

Sorry to hear of the problem you are having.

Could you please share me your site URL where it’s happening so that i can troubleshoot it?

Also if possible please share the screenshot of the issue.

Best Regards,
Movin

3

the testing site url is www.getaway24.ru
on the computer it looks fine, on the phones it looks blurry. I think it has something to do with pixel density as the resolution of the mobile contains more ppi. The preview of mobile on desktop looks fine so you will have to check it on mobile device (logo and image on footer).
Also if possible to put logo with text (in my case, show the globe with image and the brand in text format).

4

I can’t confirm the issue on mobile so could you please share the screenshot of it?

Also please test it on different browser or mobile?

5

yeah sure, here are some screenshots. I confirm that it looks the same from all my 3 android devices that I tried (chrome browser)
Notice in the second screen, that the picture in post content is much sharper than the logo.

6

You can try resolving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

#logo img {
width: 270px;
max-width: 270px;
}

7

Hello Movin, thanks for the reply.
The css code does not appear to have any effect on the site as shown on mobile devices, so it didn’t solve the problem.

I will try some online solutions that I found and I will come back with the results!

8

I don’t see the shared CSS code anywhere on your site.

Could you please tell me where you have added it?

9

I managed to solve my problem by uploading a logo double the size of my actual logo size and resizing back through custom css.

The logo real size in pixels is 380x140.
The css is.

#logo img {
width: 190px;
height: 70px;
}

As it appears, the images size-up on phone, as ppi is much higher than normal screens so you need bigger size image in order for it to stay sharp and not scale up.

Please add this to next version of the theme as it is really easy to change (change the documentation of logo suggested size to double and add max width and max height in css)

10

Awesome great to see you got that solved. We will consider this to be added.

Please advise if you have more questions.

Have a fantastic day!