How can I adjust the placement and size of my cart quantity selector?

[Ryan1998]

Anyone know how I move the Qty selector and add to cart closer together, also make it thinner please. Also the up and down arrows. Will give a coffee if anyone can help 🙂

From this

 To this please 

 

[Ryan1998]

URL : easycaffe.com

[thirtycoders]

Hi @Ryan1998,

Go to Online Store -> Theme -> Edit code.
please add this css to the very end of your base.css file and check

.product-form .product-form__submit {
    width: calc(100% - 116px) !important;
    margin-left: 120px !important;
    margin-top: -70px !important;
        font-size: 16px !important;
}

#shopify-section-template--21220955717961__main button.quantity__button.no-js-hidden {
    margin-left: -11px;
    margin-top: 2px;
    display: flex !important;
}

#shopify-section-template--21220955717961__main quantity-input.quantity {
    width: 97px !important;
}

label.quantity__label.form__label{
      font-size: 2rem !important;
}

Thanks!

[Ryan1998]

Thanks for the response.

It doesnt seem to be working this is my current code

.quantity:after {
border-radius: 5px !important;
}

quantity-input.quantity {
width: 60px !important;
}

.product-form__submit {
background: #db4a2b !important;
color: #ffffff !important;
}

h1, h2, h3 {
font-size: 25px !important;
}

.slider-buttons.no-js-hidden.quick-add-hidden {
display: none;
}

.price__container {
font-size: 20px;
}

svg.icon.icon-minus {
display: none;
}

button.quantity__button.no-js-hidden {
display: none;
}

.product-form__input.product-form__quantity label.form__label {
font-weight: bold;
}

.button {
font-weight: bold;
}

Also any chance you able to include the up and down arrows 🙂

[thirtycoders]

Firstly, you can implement my code and adding this code here is the code.

.quantity__button svg {
  display: none;
}

.quantity__button[name="minus"]::before {
  content: url('minus-arrow-icon.png'); 
  display: inline-block;

}

.quantity__button[name="plus"]::before {
  content: url('plus-arrow-icon.png');
  display: inline-block;

}

[Ryan1998]

Thanks but ive added this code and nothing changes I think it may be conflicting