How to change size of add to cart button?

[MGNetworks]

Hi dear folks, i'm trying to resize this add to cart button to full width of the page, it doesn't look professional if it's aligned to left side and now full width to the right side.

How could i do this?

I think it's a simple fix by adding some css anywhere but i can't seem to figure it out.

in case u wanna check urself: https://lushloots.com/products/emilie

 

[MGNetworks]

To be clear: This is mobile version, desktop version is alright.

[Moeed · Accepted solution]

Hey @MGNetworks 

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) {
button#ProductSubmitButton-template--19142479642958__main {
    width: 100% !important;
}
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[MGNetworks]

Thanks alot, this one worked!

I knew it was something with button#ProductSubmitButton-template--19142479642958__main !! But i couldn't figure out for sure.

Thanks a lot.

[Moeed]

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

[Stunny]

but what if i want to size it on full screen? so there is no gap on the left and right hand side. im using the dawn theme and tried to change the css of . product__info-wrapper, . product-form, . product-form__buttons... nothing worked even with !important. I need your help haha

[ZestardTech]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Layout > base.css and paste this at the bottom of the file:

.a2cknop {
width: 100%;
}

[MGNetworks]

I tried this one also before, because i made the a2cknop class myself.

But this doesn't work unfortunately.