My logo on the mobile version of my site looks funny

Hi there,

this CSS is controlling the width of the site logo on desktop and mobile:

.site-logo {
    max-width:140px;
}

The mobile header uses the menu item height to size the logo and to keep it vertically centred, its the two together are causing the problem.

Try adding this:

#mobile-header>.inside-navigation {
    align-items: center;
}

.mobile-header-navigation .mobile-header-logo img {
    height: auto;
    padding: 0 !important;
}

I removed the padding as well to make it a little larger.

Thanks for your reply. I'm sorry but, where should I add this code?

You can find the CSS David mentioned in the Additional CSS field in the customizer:
https://docs.generatepress.com/article/adding-css/#additional-css

Thanks! That did the job

Glad we could be of help.