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

Solved
myjerseyposter
Excursionist
31 0 16

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): 

Screen Shot 2020-05-12 at 5.32.58 PM.png

after (desktop):

Screen Shot 2020-05-12 at 5.36.50 PM.png

- after (mobile):

Screen Shot 2020-05-12 at 5.37.04 PM.png

 

thank you, i appreciate any help!

Accepted Solution (1)

Accepted Solutions
KetanKumar
Shopify Partner
24919 2497 9031

This is an 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%;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 6 (6)
myjerseyposter
Excursionist
31 0 16

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
Shopify Partner
24919 2497 9031

This is an 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%;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

myjerseyposter
Excursionist
31 0 16

.@ thank you so much, my friend 🙏

noeres
New Member
1 0 1

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
Shopify Partner
24919 2497 9031

@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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing