Image Banner wider than rest of page - Dawn theme

Store Design

Topic summary

Image Banner in Shopify’s Dawn theme displays wider than other page sections; the goal is to align it with page margins, especially on very large screens. The merchant is using separate images for desktop and mobile.

Actions taken:

  • Responders requested the store link for inspection; it was shared privately.
  • A CSS snippet was suggested to constrain a specific banner section by ID (max-width: 120rem; margin: 0 auto; width: unset) and adjust the banner media (remove margins, position: relative, min-width: 100%).

Latest outcome:

  • The suggested CSS did not fix the issue. It pushed the second image off-screen to the right, and the ID selector was not accepted when used with min-width.

Status: Unresolved. Further troubleshooting of Dawn’s banner layout and correct selectors is needed, likely via reviewing the live store setup. The included CSS code snippet is central to the discussion, but a working alternative has not yet been provided.

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

my Image Banner is a lot wider than the rest of the sections of the page. I am trying to get it back inline with the marginds of the page. anyone know what code i can implement? this is esspecailly bad on very large screen.

I do have some code to make the image1 desktop and image2 mobile fyi

Thanks!!!

2

Hello @bryan76

Please share your store link so I can check

3

messaged you. thanks!

4

Please share your store link.

5 
div#Banner-template--21745894785322__f4113d54-eec5-47b7-931c-9b61f5f6cb38 {
    max-width: 120rem !important;
    margin: 0 auto;
    width: unset;
}
.banner__media.media.banner__media-half {
    margin: 0 !important;
    position: relative;
    min-width: 100%;
}
6

that’s not bad but unfortunately does not work. throws image 2 off the screen to the right and div#Banner-template–21745894785322__f4113d54-eec5-47b7-931c-9b61f5f6cb38 is not being accepted if i try to use it with min width. but thank you