pauldixon999 on "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 http://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.