[Resolved] Responsive Header Image Height **SOLVED**

[Sacha]

Hi!

I’ve looked at existing threads and at GeneratePress documentation, but I can’t seem to find an answer to my question…

I’ve created a header image for my site, which I’ve uploaded under “Background Images>Header”. I’ve edited the width so that it’s 100%, but I can’t seem to figure out how to make the height 100% and responsive.

I’ve added the “Spacing” module and edited the padding, but it’s not coming out right. The page looks smaller on my computer when I have the “Customize” window open, so the padding required in the preview isn’t the same as when “Customize” is closed and it’s cutting off part of my image. Also, it seems that I can only modify the padding for desktop and mobile, but the tablet view in WordPress uses the same padding as the desktop padding even though the size is not the same, so it adds extra white space because the image size decreases while the padding stays the same.

Am I missing a setting from a module I haven’t activated? Or is there some sort of simple code I can add to make the image height 100% and responsive?

Thanks!

EDIT: Played around with the setting and figured it out myself. Instead of adding it as a background image, I added it as a logo and set the padding to zero. It now changes depending on the size of the window, whether on desktop or mobile. Figured I’d edit this with the answer in case someone else came across the same problem.

[Leo]

Glad you were able to figure out!

[Patrick]

Thanks for the solution, Sacha.

[Mike]

Thanks Sacha.

[Author]

Posts