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
7893 1533 1563

Hi @ShootsDraws 

Please update your code to this

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

Best Regards, 

Dan from Ryviu

 

- Helpful? Like and Accept solution or ❤Donate❤
- 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?