Storefront – How to change logo size for mobile

  • Hi,

    I wonder if someone can help please. I’m trying to stop my logo in the header section from reducing in size when viewed on a small screen device (<768px).

    I am using a child theme and have added this to the style.css which resizes the logo on larger screens just fine:

    @media screen and (min-width: 768px) {
    /* LOGO */
    .site-header .site-branding, .site-header .site-logo-anchor, .site-header .site-logo-link { width: 40% !important; }

    I have tried the same but using @media screen and (max-width: 767px) but the logo is still tiny on the small screen device. I have even tried setting width: 350px but it seems to have no effect at all.

    My website is https://www.thewoodenworld.com and if you resize the window you can see the problem. The logo becomes so small that it’s very unreadable on a small screen.

    Does anyone know how to fix this please?

    Many thanks
    Paul.

Viewing 5 replies - 1 through 5 (of 5 total)
  • @media screen and (max-width: 768px) {
.site-header .site-branding img{
    max-height: none !important;
    width: 222px !important;
}

    try this !!

    Thread Starter pauldixon999

    (@pauldixon999)

    You Sir are a genius ??

    It worked!

    However…. the logo on the desktop site (>768px) is now a lot smaller than before – the only change I made was add your code above.

    I tried changing the 222px and also tried my existing code, but I cannot change the size of the logo at all on the desktop site.

    Any ideas please?

    style.css ==> Line 797

    .site-header .site-branding img, .site-header .site-logo-anchor img, .site-header .site-logo-link img {
    height: auto;
    max-height: none;
    max-width: none;
    width: 300px !important;
    }

    Thread Starter pauldixon999

    (@pauldixon999)

    Many thanks, that’s the one. +Rep!!

    I’d like to understand this better so I don’t have to bother you guys again so can you tell me why to set the logo size on the mobile site it only requires “.site-header .site-branding img” but for the desktop site it requires the 2 extra parameters “.site-header .site-logo-anchor img” and “.site-header .site-logo-link img” please?

    I am having the same issue. Where do you actually put this code?

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Storefront – How to change logo size for mobile’ is closed to new replies.