How would i go about making the hero fill ONLY 80% of the page?
I want the hero to take up the entire top visible page, no matter the size, and the Stencil image to be centered at all times but i can not figure out how to do that. any help?
4 Replies
i forgot to add the height on there, but the same issue still occurs,
there are a few issues
- your <header> is in the <head> section instead of the <body>
- you use margins where a padding on the parent is sufficient
- there is no min-height set on the header, so it doesnt know how large it should be to fill the screen
- you have some properties set on the * wildcard selector, where it is enough to set it on the body alone (it will cascade down to other element)
i made a few changes to make it work
- html/body height 100%;
- nav and hero inside the header (min-height 100%)
- display: grid on the header with the nav position sticky top
- hero : diplay grid to center the image
https://codepen.io/MarkBoots/pen/KKBRaWX
it can be cleaned up more, but i think this already helps you
thank you