How can I reduce the height of my Dawn 2.0 image banner?

Store Design
,
1

Hello, I’ve tried several of the solutions for reducing image banner height 2.0 and nothing seems to work. I want to reduce it for the desktop version but still allow the responsiveness on mobile.

Site: https://moliorcoffee.com/

This image banner is located on the home page. It’s just too tall, even with the smallest setting.

Any advice is much appreciated!!

Farmers worth celebrating - reduce height needed.png
Farmers worth celebrating - reduce height needed.png1256×506 1.6 MB

2

Thanks, Steven. It didn’t work. I’ll send you an email. Thanks!!

3

Hi @Hollyjn

You can do it in the following way if you are using the Dawn theme

  • Please go to Edit Code and find the file section-image-banner.css and find the following code:
.banner--small:not(.banner--adapt) {
    min-height: 42rem;
}
  • Then, you replace it with the following code. You can edit the height of the image by changing the value of the height (eg 25rem as shown below):
.banner--small:not(.banner--adapt) {
   height: 25rem;
}

In that file find the following code:

.banner__content {
    padding: 5rem;
}

You change the value of padding if the content and buttons in the image-banner are partially lost due to the reduced image height. However, reducing the height of the banner image will make the display content limited, so please adjust the content properly.

We hope the above suggestions can help you!

4

Thank you so much. That worked!! I appreciate you. I spent way too much time trying to figure this out!! Bless you.

1 Like