[Resolved] Distorted mobile logo

Home Forums Support [Resolved] Distorted mobile logo

Home Forums Support Distorted mobile logo

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1528155
    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.

    #1528496
    David
    Staff
    Customer Support

    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.

    #1529421
    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?

    #1529620
    David
    Staff
    Customer Support

    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

    #1529687
    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

    #1530073
    David
    Staff
    Customer Support

    They all look great to me !

    #1533640
    Michael

    Thanks ๐Ÿ™‚
    I’ll leave the CSS as is.

    Cheers ๐Ÿ™‚

    #1533964
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.