X Pro Responsive Header Problem

[danbentonsmith]

Hi, I am having an issue with the responsiveness of my header.
I have a header (named Hero Desktop) which is only visible on the 2 smallest breakpoints, but as you can see the image seems to overlap the button and text above and I cannot seem to fix this: http://take.ms/szPff
Also the pink background does not fully contain its contents as the bottom of the image is sticking out.

http://take.ms/Vx7wo

How to fix this please.

I have left my login details in a secure note.

Thanks

[ruenel]

Hello @danbentonsmith,

Thanks for writing in! The height of your hero mobile bar will not work on landscape. Adding calc(100vh - 120px) will limit the height of the bar content. I would highly suggest that you use a fixed pixel height of at least 550px so that the flower image will be displayed decently.

Hope this helps.

[danbentonsmith]

Hi, yes I am aware that I can do this but then I end up with a huge gap between the heading and the image, and the only way to solve this is to use a huge negative margin (-800px). Surely this is not the best way to do it?

I would appreciate some help with this please!
Thanks

[rad]

Hi @danbentonsmith,

Seems to be okay now, where did you add the negative margin? Seems to be perfect on my end regardless of view. As long as it responds, it should be okay.

Thanks!