(debut theme) add to cart button sizing/alignment issue

[myjerseyposter]

On desktop, I am trying to align my add to cart button with my customization fields on the product page in the debut theme. I have tried changing the size of the button but when I go on to mobile, it extends past the page and looks sloppy.

my website is: myjerseyposter.com

here are screenshots of the issue:

before (desktop): 

after (desktop):

- after (mobile):

thank you, i appreciate any help!

[EffectiveApps]

Hey,

Can you share the code you've changed here?

[myjerseyposter]

Hi,

within the theme.scss.liquid this is the code i have changed. all i have done was change the width.

before:

.product-form__cart-submit {
  display: block;
  width: 100%;
  line-height: 1.4;
  padding-left: 5px;
  padding-right: 5px;
  white-space: normal;
  margin-top: 0;
  margin-bottom: 10px;
  min-height: 44px;

after:

.product-form__cart-submit {
  display: block;
  width: 133%;
  line-height: 1.4;
  padding-left: 5px;
  padding-right: 5px;
  white-space: normal;
  margin-top: 0;
  margin-bottom: 10px;
  min-height: 44px;

thanks again!

[KetanKumar · Accepted solution]

@myjerseyposter 

Thanks for post

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.product-form__item--no-variants {
    max-width: 100%;
}

[myjerseyposter]

.@KetanKumar thank you so much, my friend 🙏

[noeres]

Hello guys,

that alone did not work for me, I also had to do the following and finally everything is working fine, after spenging a lot of time on this issue:

theme.css:

.product-form--payment-button-no-variants {
  max-width: 100%; 
}

[KetanKumar]

@noeres 

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.