How can I effectively reduce the image banner size in Dawn theme?

Store Design
1

I have read through several solutions on this board for changing the height of the image banner on the homepage of the Dawn theme.

First I tried editing the section-image-banner.css file in this section to reduce the height of 100% to 80% or even 50% and it didn’t do anything.

.banner__media {
height: 100%;
position: absolute;
left: 0;
top: 0;
width: 100%;
}

Then I found another solution to edit the base.css file and add the following to the bottom, however this reduced the image size, but still left the gray container box in the original size behind so that didn’t work either.

.banner__media.media { max-height: 380px; }

I don’t know if these are older solutions or not, but none of these solutions work. I just want to reduce the size of my main image banner down to about 60 or 80%. Can anyone provide any further assistance on how to get this to work once and for all?

Thanks!

2

Can anyone assist please? I need to open my store but cannot seem to get the banner to show properly. Thank you!

3

Hi

Not sure if you have found a solution yet, but I have also been searching to try to reduce the width of my image banner so it is in line with the rest of the page. I tried many of the solutions (which did nothing) but this one worked for me

https://community.shopify.com/c/shopify-design/dawn-2-0-image-banner-width/m-p/1385627

I placed the code at the bottom of ‘image-banner.liquid’.

I hope it works for you too :slightly_smiling_face: