Image banner width in Dawn theme

Store Design

Topic summary

A user seeks help adjusting the image banner width in Shopify’s Dawn theme to match the header and body content width consistently across the site.

Problem:

  • Image banner extends beyond the width of other page elements
  • User wants uniform alignment similar to a reference website provided

Solution Provided:
A support team member (DaisyVo from Avada Support Team) offers a CSS-based fix:

  1. Navigate to Shopify admin > Online store > Customize
  2. Access Theme settings > Custom CSS
  3. Add custom CSS code:
div.banner.banner--content-align-center {
  max-width: 110rem !important;
}

Outcome:
The user confirms the solution worked successfully and thanks the support team. The issue is resolved.

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

Hello, I was wondering if someone could help me with my image banner. I’m currenlty using the Dawn theme and I want the image banner to be the same width as the header and rest of the website at all times. I’ve included an ( admittedly rather crude! ) image to illustrate my design objective.

websitedesign.jpg
websitedesign.jpg3280×1989 444 KB

Also here is a link to website for reference to want I want my image banner behaviour to be like :

https://stoneagegamer.com/

2

Hi @maxpanell , thanks for your question.

After reviewing the reference site you shared, it appears that their banner seamlessly matches the width of other elements within the body of the page, creating a clean and cohesive appearance. To achieve this in your store, the solution would be to adjust the header size separately to align with the body content and the banner image.

I hope it’d helpful to you.

Liz.

1 Like
3

Hi @maxpanell

Could you please share with us your store link for further investigation?

Thank you!

Best,

Daisy - Avada Support Team.

4

sure thing, here is a link to my website with the image banner :

www.senkogames.com

5

Hi @maxpanell

I hope you are well. You can follow our instructions below:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
Step 3: Copy the code below and paste it there

Here is the code for Step 3:

div.banner.banner--content-align-center {
  max-width: 110rem !important;
}

image (14).png
image (14).png1855×776 299 KB

Please let me know if it works. Thank you!

Best,

Daisy - Avada Support Team.

1 Like
6

Yes that worked just fine, thank you very much for your help

1 Like