Image Banner Size - Dawn theme

Store Design

Topic summary

A user is experiencing a layout issue with the Image Banner component in Shopify’s Dawn theme, where the banner displays at full width on large screens while the rest of the site content appears narrower.

Root Cause Identified:
The problem stems from custom CSS code added to make two banner images responsive. The CSS controls image visibility and sizing across different screen sizes using media queries.

Current Status:

  • The user has identified the conflicting CSS but hasn’t yet resolved the width mismatch
  • The custom code uses !important declarations and breakpoints at 947px max-width
  • No solution or fix has been implemented yet

The discussion remains open with the user seeking advice on how to correct the banner width while maintaining responsive image functionality.

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

We noticed that on large screens the Image Banner is Full Width but the rest of the site is more narrow. maybe it is because it is not following the rest of the site’s Rich Text Editor Configuration. Not sure.

has anyone had this issue and fixed it?

(using Dawn Theme)

Thanks!

2

update: I have code in the Custom CSS to make the two images responsive. This is effecting the width. The code is:

.banner__media:first-child {
width: 100%;
}
.banner__media + .banner__media {
display: none !important;
}
@media screen and (max-width: 749px) {
.banner__media:first-child {
display: none;
}
.banner__media + .banner__media {
width: 100%;
display: block !important;
}
.banner__media + .banner__media {
padding-bottom: 70% !important;
padding-left: 60% !important;
}
}