Resize Add to cart button and buy button on theme streamline

[MarshallTharsow]

I want to reduce the size of my add to cart button and buy button on the theme streamline. Please kindly help me

[KetanKumar]

@MarshallTharsow

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[MarshallTharsow]

https://www.lilymist.com/

[KetanKumar]

@MarshallTharsow

can you please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
   this code apply for after 5 - 6 second

.payment-buttons {
    max-width: 50%;
}

[Kinjaldavra]

hello @MarshallTharsow

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

.template-product .payment-buttons{
    width: 60% !important ;
    margin: 0 auto !important;
}

[MarshallTharsow]

Thanks, it worked the image attached below but is it possible to it side by side. I will like it like that in order to optimise that vacant space

[Kinjaldavra]

ok please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file. see screenshot http://prnt.sc/13jes9s

.template-product  .payment-buttons{
    width: 60% !important ;
}
.template-product  .add-to-cart{
    border-radius: 35px;
}
.template-product  .shopify-cleanslate ._1LP9NPTft85QosIXd3_zOV {
    border-radius: 35px  !important; 
}

[MarshallTharsow]

It is still the same thing, didnt have it side by side.

[KetanKumar]

@MarshallTharsow

do you mean like this?

[MarshallTharsow]

Yes, Exactly how I want it

[KetanKumar]

@MarshallTharsow

thanks for confirm

please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
   this code apply for after 5 - 6 second

@media only screen and (min-width: 420px) {
.template-product .payment-buttons {
    display: flex;
    align-items: center;
}
.template-product .payment-buttons .btn--tertiary {
    padding: 10px 25px;
    width: 50%;
    margin-right: 10px;
    margin-top: 10px;
}
.template-product .shopify-payment-button {
    margin-top: 10px;
    width: 50%;
}
}

[MarshallTharsow]

Thanks, It actually works but didn’t spread out the way I want it. Kindly check the image below. If I can have the way you sent it to me, I think I need to change things like width and height

[MarshallTharsow]

Thank you, I found a way.

[KetanKumar]

@MarshallTharsow

Wow Great

Thanks for update

[Azmi]

Hello KetanKumar

I want also to change the add to cart button. i just want to change the size. i want to make it a little bigger. Can you help me pls?

URL: azos.ch

PS: i don’t have the theme.css folder i just have theme.css.liquid

thank you very much for your help.

[KetanKumar]

@Azmi

yes, please confirm

[Azmi]

this looks perfect.

[Azmi]

KetanKumar?