Add to cart size

[AdamOx]

Hi,

Bodybuilding & Sports Supplements – Discount Supplements

Could someone please help me change a button on our website? 

In mobile view, our add to cart button doesn't go to the end and looks rubbish. I'm wondering if someone can help me fix this, please?

[Dan-From-Ryviu]

Hi @AdamOx 

Please go to store admin > Sales channels > Online Store > Themes > Customize > Theme settings > in Custom CSS, add this code 

@media (max-width: 749px) {
    .product-content-wrapper .pdp-form-action-wrapper {
        grid-template-columns: 100%;
    }
}

[AdamOx]

Hi,

Thank you for helping with this! It seems to do the trick on mobile.

Is there a way to stack them on the desktop so that the add to cart button is much more prominent please? 🙂 

[Moeed]

Hey @AdamOx 

Follow these Steps:

1) Go to Online Store
2) Edit Code

3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (max-width: 767px) {
.product_form_wrapper {
    width: 100% !important;
}
.pdp-form-action-wrapper {
    display: flex !important;
}
}
</style>

RESULT:

If I managed to solve your problem then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[bonyecommerce]

Hi @AdamOx ,

Please go to `style.css` file in the assets of the live theme and find:

    @media only screen and (max-width: 767px) {
        .pdp-form-action-wrapper {
            grid-template-columns: 80% 18%;
        }
        .pdp-action-wrapper {
            flex-direction: column;
        }
        .pdp-action-wrapper > * {
            flex-grow: 1;
            width: 100%;
        }
    }

// And change it to
    @media only screen and (max-width: 767px) {
        .pdp-form-action-wrapper {
            grid-template-columns: 100%; // Change only this line
        }
        .pdp-action-wrapper {
            flex-direction: column;
        }
        .pdp-action-wrapper > * {
            flex-grow: 1;
            width: 100%;
        }
    }

Here is the result:

[AdamOx]

Hi,

Thank you for helping with this! It seems to do the trick on mobile.

Is there a way to stack them on the desktop so that the add to cart button is much more prominent please?