Dawn Theme 12.0 Banner Image max-width alignment

Store Design
, ,

Topic summary

Shopify Dawn 12.0 banner alignment and responsiveness. The goal is to prevent banner images from stretching on large screens, enforce a max-width, and keep the banner centered across homepage, collections, and blog posts while remaining responsive on mobile.

Current attempt: CSS applied to .banner__media with max-width: 1200px !important; margin: 0 auto !important; and a CSS variable --border: 20px solid pink. Despite this, the banner stays left-aligned on larger screens.

Requirements:

  • Center the banner regardless of screen size.
  • Limit banner width (do not exceed actual/image width).
  • Apply consistently across all pages where the banner is used.
  • Preserve mobile responsiveness.

Notes: max-width limits the element’s maximum width; margin: 0 auto typically centers block elements when a width is set, but may not work if parent layout or display settings prevent centering.

Resources: Test store URL and password provided for review.

Status: Open; seeking CSS guidance, no resolution yet.

Summarized with AI on January 5. AI used: gpt-5.
1

Hi all, I’d love some guidance as my CSS is a bit rusty! I’ve added a banner image to my home page, collections and blog posts on www.childrensfootball.com but I don’t want it to stretch over the actual size on larger screens. I’ve tested setting the max-width using this code, however, the banner is on the left and I want the banner to be centred, regardless of screen size. I also want this to work on all pages I add the banner to, and still adapt on a mobile screen.

I’ve added the code to a test site: https://childrens-football-test.myshopify.com/ pwd ohlyai

.banner__media {
max-width: 1200px !important;
–border: 20px solid pink;
margin: 0 auto !important;
}