How can I make my banner image full viewport height?

[ShootsDraws]

Hi,

Here's a preview linked to the draft theme I'm working on: https://gww83pkp2ac12fkz-65019576489.shopifypreview.com

I would like the banner image on my home page to be full viewport height across all devices. I tried adding the following code to theme.liquid, but it isn't working - on my desktop, I am still having to scroll down the page slightly to reach the bottom of the image):

<style>
.banner {
height: 100vh;
}
</style>

Any help would be appreciated. Thanks!

[Dan-From-Ryviu]

Hi @ShootsDraws 

Please update your code to this

.banner {
    height: calc(100vh - 39px);
}

Best Regards, 

Dan from Ryviu

[ShootsDraws]

Thanks @Dan-From-Ryviu 

For some reason, I'm not seeing any change though. When viewed via mob, part of the footer is also visible. I'm presuming it's something I'm doing wrong.

Can you advise where I should place the code? I currently have it at the bottom of theme.liquid, just above </body>. Should it be somewhere else?