How Do i Decrease Dawn Theme Image Banner Height

Store Design
, , ,

Topic summary

  • Goal: Reduce Dawn theme Image Banner height on desktop while keeping full-width display on mobile.

  • Current setup: Uses “Adapt to first image” because the “Small” height option crops the sides of banners on mobile.

  • Tried: Changing the source image size (from 4320×2160 to 1200×600) did not affect the banner’s displayed height.

  • Partial workaround: Edited section-image-banner.css to set .banner–small:not(.banner–adapt){ height: 25rem; }, which produces the desired 25rem height on desktop. However, this requires using the “Small” setting, which causes mobile cropping.

  • Request: A method to control/limit desktop banner height specifically when using the “Adapt to first image” option, so mobile remains uncropped.

  • Status: No solution provided yet; issue remains open.

Summarized with AI on December 29. AI used: gpt-5.
1

Please I need help with reducing the Image banner Height on Dawn theme for desktop website view.

I designed the banner on canva and initially used 4320px X 2160px, then tried reducing it to 1200px X 600px and it was still the same height .

I use the “adapt to first image” when customizing the banner height in dawn theme, because when i use “Small” the sides of all my banners get cut off in the mobile view.

I figured out how to reduce the banner height for the small banner to the size i want on the desktop by changing the code in section-image-banner.css

.banner–small:not(.banner–adapt) {

height: 25rem;

}

25rem is the perfect height for me on the desktop view, but like i said i cant use the “small” option, because the width of the banner image doesn’t show fully on the mobile view.

How do i adjust the Image Banner height for the desktop when i use the “Adapt to first Image” setting?
Any help will be highly appreciated.