How to make image banner size same size as collage - Dawn theme

Store Design
, , ,

Topic summary

A user seeks to align the width of an image banner with a collage section in the Dawn theme. They prefer a code-based solution rather than hiring a developer.

Proposed Solutions:

  • Check if “Full width” layout option exists in Image Banner settings
  • Add CSS to base.css or theme.css:
    .banner__media {
  max-width: 100% !important;
  width: 100% !important;
}
  • If CSS fails, manually inspect section-image-banner.liquid and section-collage.liquid files to ensure container widths match

Current Status:
The user reports the suggested CSS code did not resolve the issue. The discussion remains open with no working solution identified yet. A screenshot was shared showing the width discrepancy between the banner and collage sections.

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

How do I make the top image banner the same width as the collage? Dawn theme

2

Hello, @shakkhoza

Kindly share a screenshot of the issue you’re experiencing or your store’s URL.

3

Hi there, thanks for the reply, I was just looking for a simple fix via code, which I can implement myself as I am not looking for a developer

4

Hi, please find the image attached.

TOP HALF.png
TOP HALF.png2869×10705 1.39 MB

5

Very well then.

Follow these steps to make the image banner the same as the collage;

Have you tried to adjust to “Full width” if available, from the Image Banner under the Layout settings?

Add this CSS code to the base.css or theme.css under Assets;

.banner__media {
max-width: 100% !important;
width: 100% !important;
}

As a last resort, check, section-image-banner.liquid and section-collage.liquid section for the banner and collage container width if the above code doesn’t work.

Make sure both settings are maxed to the same width.

6

Hi, I’ve tried the following but this did not work?