[Resolved] Distorted mobile logo

[Michael]

Hi there 🙂

Quite a few people seem to have this problem, however, I could not find a solution that worked for me.

In short, I have uploaded a logo under Site Identity. It looks and works fine on a desktop computer. But on a mobile, in portrait mode, it is distorted. Kind of squeezed together. Please see this short video I made on my mobile: https://www.dropbox.com/s/excmtqnflw1lmjx/Distorted%20logo.mov?dl=0

As you can see, when I tilt my mobile to landscape, the logo adjusts itself, and when I tilt back to portrait mode, all is good. The logo now remains ok.

This is nevertheless a problem, since most of our visitors are first time visitors, and the logo will look wrong to them.

I have checked my Simple CSS settings, and it may be that these lines somehow creates this problem for me, although I’m not sure, and I wouldn’t know how to fix it 🙂

@media (max-width: 768px) {
    .navigation-branding img, .site-logo.mobile-header-logo {
        height: 60px !important;
    }
}

The site is http://www.smidbleen.dk

By the way, I have the exact same set-up, and problem, on sauberwerden.de.

On my third site, http://www.blojfri.se, I also have the exakt same set-up, but there everything seems to be working fine. It may be helpful to know that http://www.blojfri.se is the original site, and the other two are “duplicates”, meaning I have duplicated the whole WP-installation.

The only other thing I can think of is that both the Smidbleen-logo and Sauberwerden–logo are quite a lot wider than the Blöjfri-logo.

[David]

Hi there,

couple of things:

1. Can you make sure the problem site is running the latest version of GeneratePress Theme.
2. The problem site has an ls-is-cached class attached to the logo image. This is not standard and may be causing an issue. I assume this is from your Litespeed cache.
3. All the site logos are being lazyloaded. We recommend that you exclude logos from lazyloading.

[Michael]

Hi David,
Thank you 🙂

What seems to have solved the problem was to exclude the logos from lazyloading (in the plugin Autoptimize). Now the logos looks good from the start.

May I ask a related question on the logos? When the window size is change from desktop->tablet->mobile the following happens with the logo size. Normal->Very small->Small. To me it seems a bit strange that the tablet logo size should be smaller than the mobile logo size. Or is that best practice default?

[David]

Glad to hear that.

You have this CSS which is resizing the logo on smaller screens:

@media (max-width: 768px) {
    .navigation-branding img, .site-logo.mobile-header-logo {
        height: 60px !important;
    }
}

But you have the mobile navigation set to appear at 1065px.
In your CSS change the max-width: 768px to max-width: 1065px

[Michael]

🙂

When looking at the CSS text I had a vague recollection of why we added that CSS, and it was actually your recommendation – in my post “Padding and text restrictions”.

But I went through it now and for http://www.blojfri.se I changed it to 1065px. The logo looks and behaves ok now (as I change the screen size). The hamburger menu as well.

For http://www.smidbleen.dk I changed it to 1065, but did not add “px”. I guess that means the code is not doing anything? In any case, the logo looks and behaves ok now (as I change the screen size). The hamburger menu as well.

For http://www.sauberwerden.de I did the same as for http://www.smidbleen.dk, and also that seems to be working fine.

Would you agree? Or do you spot something which is wrong and could/should be removed.

Regards
Michael

[David]

They all look great to me !

[Michael]

Thanks 🙂
I’ll leave the CSS as is.

Cheers 🙂

[David]

You’re welcome

[Author]

Posts