Center the add to cart and make the quantity smaller

Store Design
1

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!

Screen Shot 2022-01-29 at 2.49.40 PM.png
Screen Shot 2022-01-29 at 2.49.40 PM.png2274×920 276 KB

2 
@media only screen and (min-width: 750px){
input, textarea {
    padding: 10px 18px;
    width: 33% !important;
}
}
form {
    margin-bottom: 18px !important;
}

@mylittleworld
Add this code in the bottom of the theme.scss or theme.css file

3

Hi it didn’t change anything @Zworthkey

4 
input[type="number"]{
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 33% !important;
    margin-bottom: 10px !important;
}

@mylittleworld
Add this code.

5

still nothing :disappointed_face:

6

I would like them to be on the same line and smaller - any idea?

7

Can you help me please @Zworthkey

8

@mylittleworld , do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:
.product-card + form{
    margin: 0 auto;
    margin-bottom: 20px;
}

.product-card + form > [name="quantity"]{
    margin-bottom: 10px;
}

.product-card + form,
.product-card + form *{
    max-width:150px !important;
    width: 100%;
}

.product-card{
    margin-bottom: 5px !important;
}

@media (max-width: 749px){
    .product-card + form input{
    font-size: 12px !important;
}

}

Kind regards,
Diego