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

[david258]

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

 

[Made4uo-Ribe]

Hi @david258 

On which page can I find this banner?

[david258]

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

[Made4uo-Ribe]

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;
}

• And Save.
• Result:
• 

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

[david258]

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

[Made4uo-Ribe]

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!