basics 7: full-screen header

basics 7: full-screen header

This method delivers a full-height header experience for phones, and a half-height header as the browser width increases, perhaps for tablets:

  • Set the default height of your header div to 100vh 
  • If desired, set the header height to 50vh at a tablet breakpoint, halfway up
  • For the full resolution desktop experience, the header can return to its "natural" state (auto height)