Make image banner longer

[Artez]

Hi I am trying to make my image banner longer.,

how can I do it please?

Warm regards.

[Dkpatel]

Hello Artez,

1. Go to Online Store -> Theme -> Edit code.

2. Open your assets -> section-image-banner.css file and replace the code with the code below.

@media screen and (max-width: 749px) {

.banner--large:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {

    min-height: 76rem;

  }

}

[websensepro]

Hi @Artez ,
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

.banner.banner--content-align-center.banner--content-align-mobile-center.banner--large.banner--desktop-transparent.scroll-trigger.animate--fade-in {
    height: 95vh !important;
}

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! 🚀 (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

[Artez]

don't work

[websensepro]

Hi @Artez  try this 
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
.banner.banner--content-align-center.banner--content-align-mobile-center.banner--large.banner--desktop-transparent.scroll-trigger.animate--fade-in {
    height: 95vh !important;
}
</style>

[Tech_Coding]

Hello @Artez 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width: 767px) {
#Banner-template--18541339115701__image_banner .banner--large:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
min-height: 47rem !important;
background-size: contain !important;
}
}
</style>
RESULT:

My reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[Artez]

nothing on my side

[topnewyork]

Hi @Artez,

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

div#Banner-template--18541339115701__image_banner {
    height: 100vh !important;
}

Thanks!

[steve_michael2 · Accepted solution]

Hello @Artez ,

Navigate to Online Store > Themes > click on Edit code.
Locate and open the theme.css or base.css file. Scroll to the bottom and add the following CSS code:

div#Banner-template--18541339115701__image_banner {
    height: 100vh !important;
}

Thanks!