Solved

Center the buttons on the HomePage Banner

MartaSantacana
Shopify Partner
19 1 9

Hello,

How can I center the buttons (SHOP AND CLASSES) in the Banner in the Home Page? They changed to be left aligned I don't know why and I can't find how to center them.

This is the shop: https://suzanne-raffellini.myshopify.com/

password: suzanne

 

THANK YOU!!!

Accepted Solutions (3)

dmwwebartisan
Shopify Partner
12280 2546 3694

This is an accepted solution.

@MartaSantacana 

Please add the following code at the bottom of your assets/section-image-banner.css file. 

.banner__box>*+.banner__buttons--multiple {
    margin: 0 auto;
}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Zworthkey
Shopify Partner
5581 642 1565

This is an accepted solution.

 

 

.banner__buttons.banner__buttons--multiple {
    margin-top: 10px !important;
}

 

@MartaSantacana Add this code. in section-image-banner.css 

View solution in original post

dmwwebartisan
Shopify Partner
12280 2546 3694

This is an accepted solution.

@MartaSantacana 

Remove prevoius cs code and add this code 

Please add the following code at the bottom of your assets/section-image-banner.css file.

.banner__box>*+.banner__buttons--multiple {
    margin: 0px auto;
    padding-top: 15px;
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 13 (13)

Zworthkey
Shopify Partner
5581 642 1565

@MartaSantacana 

 

.banner__buttons.banner__buttons--multiple {
    margin: auto !important;
}

 

Add this code in theme.scss or theme.css or assets/section-image-banner.css file
thank you.

MartaSantacana
Shopify Partner
19 1 9

@Zworthkey I just find theme.liquid, I try adding the code there but it doesn't make any changes 😞

Zworthkey
Shopify Partner
5581 642 1565

@MartaSantacana assets/section-image-banner.css 
Add in this file.

dmwwebartisan
Shopify Partner
12280 2546 3694

This is an accepted solution.

@MartaSantacana 

Please add the following code at the bottom of your assets/section-image-banner.css file. 

.banner__box>*+.banner__buttons--multiple {
    margin: 0 auto;
}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
MartaSantacana
Shopify Partner
19 1 9

Thank you @dmwwebartisan !!!

Zworthkey
Shopify Partner
5581 642 1565

@MartaSantacana 
kindly Accept solution if helpful.

dmwwebartisan
Shopify Partner
12280 2546 3694

@MartaSantacana 

Thanks! welcome again.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
MartaSantacana
Shopify Partner
19 1 9

@dmwwebartisan  It worked for centering the buttons but now the text is too close to the buttons, how can I add some space? Thank you!

Zworthkey
Shopify Partner
5581 642 1565

This is an accepted solution.

 

 

.banner__buttons.banner__buttons--multiple {
    margin-top: 10px !important;
}

 

@MartaSantacana Add this code. in section-image-banner.css 

Zworthkey
Shopify Partner
5581 642 1565

@MartaSantacana 
Kindly Like and Accept my solution if helpful.

Thank you.

dmwwebartisan
Shopify Partner
12280 2546 3694

This is an accepted solution.

@MartaSantacana 

Remove prevoius cs code and add this code 

Please add the following code at the bottom of your assets/section-image-banner.css file.

.banner__box>*+.banner__buttons--multiple {
    margin: 0px auto;
    padding-top: 15px;
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
MartaSantacana
Shopify Partner
19 1 9

@dmwwebartisan Thank you!!

 

onebighappylife
Visitor
1 0 0

This isn't working for me. There's no "assets/section-image-banner.css file." Could you provide an image of exactly where the code was added?