Make Hero Banner longer - DAWN

Solved

Make Hero Banner longer - DAWN

Florence
Excursionist
32 1 1

Hi,

 

I would like to change the height of the hero banner in DAWN Theme 15.0.0.. I would like to make it longer in the bottom so that you do not see the white stripe anymore in the first fold so that it ends with the end of the browser in the first fold:

Florence_0-1722503450554.png

When you click on the image you can see the bottom white stripe. 

website:florence-streif.com

pw: cheat

 

Thanks

Florence

 

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
9252 1856 1891

This is an accepted solution.

Hi @Florence 

Please go to your store admin > Sale channels > Online Store > Themes > Customize > add this code to Custom CSS of your banner section

@media (min-width: 990px) {
.banner {
    height: calc(100vh - 97px);
}
}

 

- Helpful? Like and Accept solution!
- 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

Replies 3 (3)

Dan-From-Ryviu
Shopify Partner
9252 1856 1891

This is an accepted solution.

Hi @Florence 

Please go to your store admin > Sale channels > Online Store > Themes > Customize > add this code to Custom CSS of your banner section

@media (min-width: 990px) {
.banner {
    height: calc(100vh - 97px);
}
}

 

- Helpful? Like and Accept solution!
- 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.

Florence
Excursionist
32 1 1

this helped a lot, thank you so much!

Rahul_dhiman
Shopify Partner
476 97 99

Hello @Florence 
Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> section-image-banner.css ----> line number 97
search this code

@media screen and (min-width: 750px) {
.banner--large:not(.banner--adapt) {
    min-height: 72rem;
  }
  }


and replace with this code

@media screen and (min-width: 750px) {
.banner--large:not(.banner--adapt) {
min-height: 83rem;
}
}

 result
2.png


If this was helpful, hit the like button and mark the job as completed.
Thanks

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
Mobile:- +91 62390-46167