How to apply max-height to a 100vh hero element?

I have a simple hero element that takes up the entire screen using height: 100vh. However, I don't want it to exceed 800px, so setting max-height: 800px seems like a logical solution. But it doesn’t work—on smaller screens (where the viewport height is less than 800px), the hero element doesn’t fill the screen.

demo: https://codepen.io/noobcoder137/pen/pvoRbbz
hero.jpg
Was this page helpful?