How do I align CSS buttons and quantity selector on the same line?

Store Design
1

Hello the Shopify Community,

I have a problem with my product sheet that I cannot resolve.

I want to place the quantity selector and the “add to cart” button on the same line.

https://www.cygnes.co/

code : glaopa

Thank you in advance,

Max COSTA

2

@MaxCosta - it can be done using css , please add this css to the very end of styles.css file and check, should look like screenshot below

.product-quantity-box.purchase-details__quantity {order: 1;  margin-left: 10px;}

.cart-warning {order: 3;}

suyash1_0-1639715262676.png
suyash1_0-1639715262676.png1920×1080 252 KB

3

@MaxCosta

try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/styles.css->paste below code at the bottom of the file.
@media only screen and (min-width: 1100px) {
.purchase-details.has-quantity-box .purchase-details__spb--false {
    max-width: calc(100% - 300px) !important;
    margin-top: -64px;
    margin-left: 300px;
}
}
4

Hello @MaxCosta ,

Hope you are doing well.

Please add the below code to your style.css theme file at the bottom to move the add to cart button beside the quantity picker:

@media only screen and (min-width: 798px){
.purchase-details .purchase-details__spb--false {
      margin: -64px 297px 0 !important;
}
}

Hope this will help you out. After adding the code it will appear like this:

BinalSavani_0-1639722449005.png
BinalSavani_0-1639722449005.png1274×625 411 KB