How can I make my banner image full viewport height?

ShootsDraws
Shopify Partner
9 0 2

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!

Replies 2 (2)

Dan-From-Ryviu
Shopify Partner
7711 1498 1504

Hi @ShootsDraws 

Please update your code to this

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

Best Regards, 

Dan from Ryviu

 

- Helpful? Like or Accept solution! or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

ShootsDraws
Shopify Partner
9 0 2

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?