Archived topic

How to decrease logo size on mobile devices?

5 replies · Started by Myles on February 2, 2023

Viewing posts 1–6 of 6

February 2, 2023 at 4:23 pm #2519149

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

Currently, it looks like this:

Mobile Screenshot

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!

February 2, 2023 at 4:35 pm #2519160

Hi Myles,

Can you link us to your site?

February 2, 2023 at 4:36 pm #2519161

Hi Ying,

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

February 2, 2023 at 4:50 pm #2519168

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/

February 2, 2023 at 5:21 pm #2519186

Thanks! That worked great!

February 2, 2023 at 5:23 pm #2519188

No Problem, glad to help :)

This archived topic is closed to new replies.

Start building better websites today.