Center add to cart and quantity and make them on same line

[mylittleworld]

Hello

I would like to center the add to cart, and make the quantity box and the add to cart box same size. 

Make it centered not stuck to the picture on the bottom? Picture attached and this is the link to my website www.mylittleworld.shop

Thanks a for the help!

[KetanKumar]

@mylittleworld 

yes, please try this code

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

.product-card + form {
    text-align: center;
    margin-bottom: 30px;
}

.product-card + form input.btn {
    width: 97%;
    margin-top: 10px;
}

[mylittleworld]

It doesn't change anything 😞

[dmwwebartisan]

@mylittleworld 

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

.product-card + form {
    text-align: center;
    margin-bottom: 30px;
}

.product-card + form input.btn {
    width: 97%;
    margin-top: 10px;
}

Thanks!

[mylittleworld]

@dmwwebartisan @KetanKumar  it doesn't change anything. 

also how can I align all the quantities no matter how long the product name is?

Thanks for the help!

[KetanKumar]

@mylittleworld 

sorry i can't see code where did you add this code?

[Zworthkey]

@mylittleworld 
Kindly provide us  collaboration access. so that we can help you to fix it.

[mylittleworld]

Can you ask for a collaboration request via your Shopify partner account?

[Zworthkey]

yes,

[Zworthkey]

@mylittleworld 
provide Collaborator request code

[mylittleworld]

you can request access

[Zworthkey]

@mylittleworld 
Yes, I need collaboration code to request access.

[Zworthkey]

[mylittleworld]

there

 @KetanKumar  

[DelightCart]

Please open theme.css and find below class.

.btn {

Width: auto;

}

Instead of auto with set the it with below.

.btn {

Width: 241px;

}

[DelightCart]

@mylittleworld 

Open the theme.css and find this class .btn

Change with from

width:auto;

to

width: 240px;

[mylittleworld]

Hi, I want to make quantity and add to cart on the same line @DelightCart 

[DelightCart]

Ok, Go to theme.css

You have to add the width as below.

input, textarea, select, .disclosure__toggle {

Width:80px;
}

[mylittleworld]

nop still nothing @DelightCart 

[DelightCart]

It should work. See attachment.

[mylittleworld]

where should I put it? maybe there's another code that is more important and that's why its not doing it? @DelightCart 

[DelightCart]

You have to find the class on theme.css and just you have to add width auto to what i provided 80px;

[mylittleworld]

which class? @DelightCart 

[DelightCart]

Class name is below.

input, textarea, select, .disclosure__toggle

[mylittleworld]

found it! it adjusted it on one but not on the other @DelightCart   

here is a photo

[DelightCart]

Ok, Set with 40px instead of 80px.

[mylittleworld]

When I do that we can't see the number anymore @DelightCart 

[mylittleworld]

@DelightCart Hi so i did all that but now the menu and search button on the header are unclickable and the logo has some grey behind it. How can i fix this? Pls help me asap

[mylittleworld]

@DelightCart 

there is the code:

/*================ Buttons ================*/
.btn, .shopify-payment-button .shopify-payment-button__button--unbranded {
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
width: 150px;
text-decoration: none;
text-align: center;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: 2px;
padding: 8px 15px;
margin-top: 15px;
margin-bottom: 15px;
margin-right: 15 px;
margin-left: 15 px;
background-color: var(--color-btn-primary);
color: var(--color-btn-primary-text);
font-family: var(--font-stack-header);
font-style: var(--font-style-header);
font-weight: var(--font-weight-header);
text-transform: uppercase;
letter-spacing: 0.08em;
white-space: normal;
font-size: calc(((var(--font-size-base) - 2) / (var(--font-size-base))) * 1em); }
@media only screen and (min-width: 750px) {
.btn, .shopify-payment-button .shopify-payment-button__button--unbranded {
padding: 10px 18px; } }
.btn:not([disabled]):hover, .shopify-payment-button .shopify-payment-button__button--unbranded:not([disabled]):hover, .btn:focus, .shopify-payment-button .shopify-payment-button__button--unbranded:focus {
color: var(--color-btn-primary-text);
background-color: var(--color-btn-primary-focus); }
.btn .icon-arrow-right, .shopify-payment-button .shopify-payment-button__button--unbranded .icon-arrow-right,
.btn .icon-arrow-left,
.shopify-payment-button .shopify-payment-button__button--unbranded .icon-arrow-left {
height: 9px; }
.btn[disabled], .shopify-payment-button .shopify-payment-button__button--unbranded[disabled], .btn[aria-disabled], .shopify-payment-button .shopify-payment-button__button--unbranded[aria-disabled] {
cursor: default;
opacity: 0.5; }

.btn--secondary {
background-color: transparent;
color: var(--color-btn-primary);
border-color: var(--color-btn-primary); }
.btn--secondary:not([disabled]):hover, .btn--secondary:focus {
background-color: transparent;
color: var(--color-btn-primary-focus);
border-color: var(--color-btn-primary-focus); }

.btn--secondary-accent {
background-color: var(--color-body);
color: var(--color-btn-primary);
border-color: var(--color-btn-primary); }
.btn--secondary-accent:not([disabled]):hover, .btn--secondary-accent:focus {
background-color: var(--color-body);
color: var(--color-btn-primary-focus);
border-color: var(--color-btn-primary-focus); }

.btn--small {
padding: 8px 10px;
font-size: calc(((12) / (var(--font-size-base))) * 1em);
line-height: 1; }

.btn--tertiary {
background-color: transparent;
color: var(--color-small-button-text-border);
border-color: var(--color-small-button-text-border); }
.btn--tertiary:not([disabled]):hover, .btn--tertiary:focus {
background-color: transparent;
color: var(--color-small-button-text-border-focus);
border-color: var(--color-small-button-text-border-focus); }

/*================ Button variations ================*/
@media only screen and (max-width: 749px) {
.btn--small-wide {
padding-left: 50px;
padding-right: 50px; } }

.btn--link {
background-color: transparent;
border: 0;
margin: 0;
color: var(--color-text);
text-align: left; }
.btn--link:not([disabled]):hover, .btn--link:focus {
color: var(--color-text-focus);
background-color: transparent; }
.btn--link .icon {
vertical-align: middle; }

.btn--narrow {
padding-left: 15px;
padding-right: 15px; }

.btn--has-icon-after .icon {
margin-left: 10px; }

.btn--has-icon-before .icon {
margin-right: 10px; }