How can I center my image banner on the Dawn theme?

Topic summary

A user needed help centering an image banner in the Dawn theme after resizing it. The banner displayed correctly on mobile but appeared off-center on desktop, and attempts to adjust alignment were affecting the mobile layout.

Solutions provided:

Two support teams offered CSS-based fixes:

  • GemPages team suggested adding margin properties to .banner-content-align-center in section-image-banner.css
  • PageFly team recommended adding margin: auto to .banner in the same CSS file

Outcome:

The issue was resolved successfully. The user confirmed one of the solutions worked and expressed gratitude for the assistance.

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

Hi, I’ve looked to reduce the size of my image banner on my website with the Dawn theme due to this being huge. I’ve managed to get this to the right height but I can’t get it to centre on the desktop.

It’s the perfect size on the mobile and when I move the alignment it’s moving it on the mobile page as well making it look silly.

Have no coding experience whatsoever so any help would be really appreciated! Link to my store is www.delucx.com

Hello @Delucx

It’s GemPages support team and glad to support you today.

I would like to give you a solution to support you.

  1. Go to Online Store → Theme → Edit code.

  2. Open yourassets/section-image-banner.css

  3. Paste add the code at the end of this file:

.banner--content-align-center{
  margin-left: auto !important;
  margin-right: auto !important;
}

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

Hi @Delucx ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-image-banner.css->paste below code at the bottom of the file:

.banner {
   margin: auto;
}

Hope my answer will help you.

Best regards,

Victor | PageFly

That’s worked! Thank you so much for your help! :slightly_smiling_face: