How do I center buttons in an image banner for desktop and mobile? - Dawn Theme

Store Design
, , , ,

Topic summary

Goal: Center the call-to-action buttons within the image banner on both desktop and mobile in the Shopify Dawn theme (cheercollection.com), rather than sitting near the inner corners.

Progress and actions:

  • Helper identified the banner on the home page and provided CSS changes via Online Store > Themes > Edit code > Assets (base.css/style.css/theme.css).
  • Initial CSS set the banner content to full width and used Flexbox on the button group (display: flex; justify-content: space-around) to distribute buttons and prevent flex-grow stretching.
  • Result improved alignment, but buttons still weren’t perfectly centered over the image.

Latest update:

  • Revised CSS increases enforcement by adding !important to the banner container’s max-width and reiterates full-width and Flexbox settings for the button group.

Notes:

  • Code snippets (CSS) and screenshots are central to understanding the alignment changes.
  • No confirmation of final fix yet; outcome remains open pending user feedback.
Summarized with AI on December 12. AI used: gpt-5.
1

How do I center buttons in an image banner for desktop and mobile, so that they are in the center of their perspective image. Do not like the they way ther are sitting in their inner corner, center of page.

Website: cheercollection.com

CheerCollection Button Issue.PNG
CheerCollection Button Issue.PNG1484Ă—851 225 KB

1 Like
2

Hi @david258

On which page can I find this banner?

3

It’s on the main page. It was in testing mode, but I just lanunched so you can see.

4

Thanks for the info, try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.banner__box.content-container {
    max-width: 100%;
    width: 100%;
}

.banner__content.banner__content--middle-center {
     max-width: 100%;
}

.banner__buttons.banner__buttons--multiple {
    display: flex;
    justify-content: space-around;
    max-width: 100%;
    width: 100%;
}
.banner--content-align-center .banner__buttons--multiple>* {
    flex-grow: unset !important;
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

5

Much better but still not centered over image, please review.

6

Yes, I see it, PLease, replace on this one.

.banner__box.content-container {
    max-width: 100% !important;
    width: 100%;
}
.banner__buttons.banner__buttons--multiple {
    display: flex;
    justify-content: space-around;
    max-width: 100%;
    width: 100%;
}
.banner__content.banner__content--middle-center {
     max-width: 100%;
}

.banner--content-align-center .banner__buttons--multiple>* {
    flex-grow: unset !important;
}

And Save.

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!