Archived topic
Distorted mobile logo
7 replies · Started by Michael on November 12, 2020
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.
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.
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?
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
:)
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
They all look great to me !
Thanks :)
I'll leave the CSS as is.
Cheers :)
You're welcome
