Image banner full width (encompasses header & footer)

TBrajkov24 · ‎11-19-2023

Hello,

I'm in the process of creating a website for my brand but cannot figure out how to make my image banner full screen. Below is two photos...the top one is how I want it to look...the user cannot scroll down or move anything on the front page which is how I want it, the main page image encompasses the entire front page including the header and footer (see Aimeleondore.com home page to see what I mean). The picture after is how it looks now, notice the image doesn't go all the way to the bottom of the screen.

any help is appreciated. thanks,

Thomas

Dan-From-Ryviu · ‎11-30-2023

Hi @TBrajkov24

I got your meaning. I did not see the example website you attached in the first message.

Go to your Online store > Themes > Edit code > open theme.liquid file, add the below code after <head> tag

<style>
#Banner-template--20880016900379__2084ca83-7b1a-420d-a85c-4082410c6ea7 {
height: 100vh;
}
</style>

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Dan-From-Ryviu · ‎11-19-2023

Please share your store link please.

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

TBrajkov24 · ‎11-26-2023

hello,

here it is... https://tomjacobs.com.au/

Dan-From-Ryviu · ‎11-26-2023

Hi @TBrajkov24

I cannot see your banner image

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

TBrajkov24 · ‎11-30-2023

hello, I changed the image now to a generic photo so you can see better here's a screenshot of the banner below (sand)

Dan-From-Ryviu · ‎11-30-2023

Hi @TBrajkov24

I got your meaning. I did not see the example website you attached in the first message.

Go to your Online store > Themes > Edit code > open theme.liquid file, add the below code after <head> tag

<style>
#Banner-template--20880016900379__2084ca83-7b1a-420d-a85c-4082410c6ea7 {
height: 100vh;
}
</style>

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

TBrajkov24 · ‎12-02-2023

worked, thanks heaps!!

How can I do the same thing for Phone users but keep the same image? it still has the issue for phone. assuming cause its a vertical display and not landscape.

Image banner full width (encompasses header & footer)

Image banner full width (encompasses header & footer)

Community Blog Articles