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

Log In Free Support

Popular Articles

Missing style.css

Updating errors

Installing GP Premium

Installing GeneratePress

This topic has 5 replies, 2 voices, and was last updated 2 years, 7 months ago by Ying.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
February 2, 2023 at 4:23 pm #2519149

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!

February 2, 2023 at 4:35 pm #2519160

Ying
Staff
Customer Support

Hi Myles,

Can you link us to your site?

February 2, 2023 at 4:36 pm #2519161

Myles

Hi Ying,

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

February 2, 2023 at 4:50 pm #2519168
Ying
Staff
Customer Support
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

Myles

Thanks! That worked great!

February 2, 2023 at 5:23 pm #2519188

Ying
Staff
Customer Support

No Problem, glad to help 🙂
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.