Shopify themes, liquid, logos, and UX
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:
When you click on the image you can see the bottom white stripe.
website:florence-streif.com
pw: cheat
Thanks
Florence
Solved! Go to the solution
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 & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
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 & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
this helped a lot, thank you so much!
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
If this was helpful, hit the like button and mark the job as completed.
Thanks
June brought summer energy to our community. Members jumped in with solutions, clicked ...
By JasonH Jun 5, 2025Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025