[Resolved] Mobile header size

[Diana]

Hi there,

I’m wondering how I can make my header appear centered and bigger on a mobile device (basically I want it to look the same as it does on a desktop). Right now when I view my site on mobile, the header appears very tiny in the upper left-hand corner and aligned with the menu. Is there a way to change this?
Thank you!

[Leo]

Hi there,

Disabling the mobile header should work: https://docs.generatepress.com/article/mobile-header/

[Diana]

Thanks! I did this and it brought the header where I wanted it but the size was still very small. I changed the padding around the header and it now looks pretty good in mobile but the header size is huge on desktop view. Way too big. Is there a way to fix the sizing?

[Leo]

I would suggest setting the padding to what you want on desktop in the customizer:
https://docs.generatepress.com/article/header-padding/

Then change it for mobile using CSS:

@media (max-width: 768px) {
    .inside-header {
        padding: 10px 10px 10px 10px;
    }
}

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

[Diana]

Wonderful, it worked! Thank you!

[Leo]

No problem!

[Author]

Posts