Avoid blurry page logo when page is zoomed

[René Fritsch]

we’re using “Adventure” theme on our website. Some of our users have reported, that the site logo was looking “blurry” to them.

I’ve checked via Customizer: The logo has 120 x 72px and fits the height of our navigation bar just fine as long as the page is displayed with 100% zoom factor. When I zoom in the logo does indeed become blurry. As the user who has reported this was using an iPhone, I suspect that the root cause may also be a very high screen resolution.

I already tried uploading a much larger version of the logo and then restrict the dimensions within customizer to the original 120 x 72px. This restriction is not applied however, the image appears super large.

Is there another way to prevent the image from getting blurry?

[Sonnal S Sinha]

Hi,

Kindly show us your website URL and screenshot of your issues.

Upload your screenshot on https://imgbb.com/ and paste the share url here.

Regards,
Dave

[René Fritsch]

Hi Dave,

our website URL is https://www.owkdieburg.de/

In desktop mode, the logo looks fine (PNG, 120 x 72 px).

On an iPhone, the logo is blurry, see here: https://ibb.co/RTTf2Qt

[Sonnal S Sinha]

Hi,

Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

@media screen and (max-width:479px) {
.header .logo img {
  height: 72px !important;
  width: 120px !important;
}
}

Regards,
Dave

[Author]

Posts