[Resolved] Header image cutoff depending on screen size

[Tyrone]

While looking on a box screen monitor the deader looks perfectly fine. When viewing the header on a 15′ wide screen laptop, the header is partly cutoff near the bottom.

The settings are as follows:
Header width: full
Inner header width: full
Header alignment: center
Header padding: top 186 bottom 0 right 0 left 0
Mobile header: off

Also, I would like the header to also be clicked on to access the home page. Not sure why I can’t do it for this site while others have worked perfectly fine.

[Leo]

Hi there,

Background images aren’t responsive by nature.

Try adding that image as the logo instead:
https://docs.generatepress.com/article/adding-header-logo/

Then it will be a link to the home page as well.

Let me know if this helps 🙂

[Tyrone]

Thanks. That worked. There appears to be one other slight issue. Whereas the header covered the entire width of the screen before on the widescreen laptop, it’s not fully covering the screen now on the laptop. There is some spacing on the left and right hand side. I have checked all the settings and can’t figure out what’s going on for the header to not stretch the full width of the screen.

[Leo]

Your image itself isn’t wide enough to stretch the full width of the screen:
http://ncwomeninministry.com/wp-content/uploads/2018/09/ncawm-header1.jpg

You will want something around 2000px in width.

[Tyrone]

Thank you. I’ll keep the 2000 pixel width in mind.

[Leo]

No problem 🙂

[Author]

Posts