Resizing Add to Cart and Buy Button align next to each other Dawn

Store Design
1

Hello,

I entered the following code:

@media only screen and (min-width: 750px) {
.template-product .payment-buttons {
display: flex;
align-items: 0;
}
.payment-buttons {
width: 235px !important;

}
.shopify-payment-button {
width: 235px !important;
}

and noticed it only reduces the “buy button” size but not the “add to cart” button. I also wanted to try to put the buttons next to each other instead of stacked above and below. Is this possible to do? Thank you in advance for you help.

2 Likes
2

Hi @mjdubarr ,

Can you please include the URL of your store? I need to take a look at the store page before I can offer any solution/guidance. Thanks

3

Thank you.

url: www.melaniejean.com

password: qwertyuiop

4

@mjdubarr

1] Please add the following CSS code to your assets/section-main-product.css bottom of the file.

@media only screen and (min-width: 750px){
.shopify-payment-button__button {
    font-size: 1.5rem !important;
    letter-spacing: 0.1rem !important;
    width: 45% !important !important;
    margin-left: 6.1em !important;
    display: block !important;
}
}

2] Please add the following CSS code to your assets/base.css bottom of the file.

@media only screen and (min-width: 750px){
.product-form__submit.button--full-width {
    display: block !important;
    width: 45% !important;
    float: left !important;
    margin-right: 22px !important;
}
}

Thanks!

5

Hi,

I tried the code and it did make the “add to cart button” smaller as well as the “buy it now button”, however, they are not next to each other. Is there a way to put them side by side? Thank you.