Streaming live at 10am (PST)

Header and Footer Overlap on Mobile

I’ve got a landing page that has a nav bar stuck to the top and a footer section stuck to the bottom. The middle of the site is empty because it relies on the background image forming the center element. This is proving to be a major pain due to mobile versions and browser resizing.

How can I make it to where there is always a gap between the header and footer so that space remains and they never overlap when resized. see examples



Actual Look When Landscape on Device

Heres the share link >>

Anyone that can help, you will be greatly appreciated!