[Resolved] How to decrease logo size on mobile devices?

[Myles]

I’m trying to do a couple of things when it comes to my logo on mobile devices.

Currently, it looks like this:

First, how do I adjust the size of the mobile logo without affecting the size of the banner? I’ve been fiddling with the padding in customizer, but it also affects the banner size.

Second, there is a red arrow in the screenshot. How do I decrease the space that is currently there? I don’t see an option/setting for this.

Thanks!

[Ying]

Hi Myles,

Can you link us to your site?

[Myles]

Hi Ying,

Here you go: https://wordpress-688581-2273186.cloudwaysapps.com/

[Ying]

Try this CSS for the logo size and the space:

@media(max-width: 768px) { 
    .site-header .header-image.is-logo-image {
        width: 150px;
    }
    .site-header .header-widget {
        margin-top: 0;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Myles]

Thanks! That worked great!

[Ying]

No Problem, glad to help 🙂

[Author]

Posts