Dawn Landing page Banner extra space

Store Design

Topic summary

A user is experiencing unwanted white space above a banner on their landing page using Shopify’s free Dawn theme. They’ve attempted several troubleshooting steps without success:

Attempted fixes:

  • Resized banner images to multiple dimensions (1000x400px, 1200x800px, 2500x600px)
  • Adjusted custom CSS with top margin set to 0
  • Added CSS code targeting .banner with margin-top: 0 !important in the liquid file
  • Can only use “adapt to first image” height setting, as other options prevent the banner from displaying

Current status:
The issue remains unresolved. The user suspects the problem may be related to a 0.75 multiplier in the section padding code within the theme’s liquid file, which applies different padding values for mobile versus desktop screens.

Multiple community members have requested the store URL to investigate further. The user shared a link to an unpublished development version but expressed uncertainty whether it would be accessible for troubleshooting.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I am currently working on updating my website (free dawn theme) and wanted to change the banner however it leaves a lot of empty white space above the banner itself. What can I do?

  • I can only select “adapt to first image” as banner height otherwise the banner does not show

  • I have resized it several times but the issue remains the same (current size 1000x400px; 1200x800 and 2500x600 also did not work)

  • I adjusted the Custom CSS code connected with the picture with a top margin of 0 (bottom and sides are fine)

  • I tried the solution of adding this below code in the liquid file but also no response

<style>
.banner {
    margin-top: 0 !important;
}
</style>
2

Hi @JFish25 ,

Please share the store url link.

3

HI @JFish25

Please share your store URL and the link of the spot you want to correct

Best,

Daisy

4

Hi
Can you share store URL?

5

Link

Not sure if it works since this one is just an unpublished version though…

6

I think it might connected to the .75 part here but not sure

{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}

@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}