Site header image different size on Mobile than desktop

[Paulina]

Hi, I’m working on a site and for some reason the image I am using for the site header always displays as a smaller size on Mobile. It displays correctly on desktop.

Sorry for bothering you with this as it seems like it’s probably a simple solution. However I have been searching for how to fix it for two days now and I’m completely stuck.

Please help!

On both Mobile and Desktop, the image being used for the header should display as 800px wide, aligned with both sides and the header image should be flush with the rest of the body (no white space between header and body).

Thanks!

[Leo]

Hi there,

Try adding that image as a site logo instead of a header widget:
https://docs.generatepress.com/article/adding-header-logo/

Then remove the header padding on mobile (with the mobile toggle activated):
https://docs.generatepress.com/article/header-padding/

Let me know if this helps 🙂

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

[Paulina]

That fixed it. Thanks!

[Leo]

No problem 🙂

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

[Author]

Posts