Move QuantitySelector next to AddToCart button

[monaim_ouadah]

I want my quantity selector to be next to the add-to-cart button. The current state is this:

But, I need this:

The theme is Sense, and the shopify-url is boundless-3558.myshopify.com

I hope I can be helped. Thank you very much in advance!

[Ujjaval]

@monaim_ouadah
Put below css into base.css file (Online store->themes->Edit code->Assets->base.css)

@media (min-width:1025px) 
{
.product-form__buttons {
    max-width: 28rem !important;
    margin-top: -72px !important;
    margin-left: 37% !important;
}
}

[monaim_ouadah]

Thank you very much for the help!

[monaim_ouadah]

There’s one problem with the solution. I also want this to happen on desktop and mobile. The space between the quantity selector and add to cart button is too small on devices with smaller screen:

Desktop:

Mobile:

How can I fix this? I also want the add to card button to be round on the borders.

[Ujjaval]

@monaim_ouadah
Put below css into base.css file

@media (max-width:961px)
{
.product-form__buttons {
    width: 77%;
    padding-left: 42px;
}
}
@media (max-width:425px)
{
.product-form__buttons {
    width: 66%;
    padding-left: 40px;
}
}

button.product-form__submit.button.button--full-width.button--primary {
    border-radius: 35px !important;
}

[monaim_ouadah]

It now shows a kind of border on the add to cart button:

And on certain pages, distance between the quantity selector and add to cart is too small. I want the distance between them to be the same on all formats. Is that possible?

[Ujjaval]

@monaim_ouadah
put below css to remove border of buttons

.button:after, .shopify-challenge__button:after, .customer button:after, .shopify-payment-button__button--unbranded:after {
    box-shadow: none !important;
    }

[monaim_ouadah]

And the distance fix on mobile and desktop? Is there a way to say that the quantity selector needs always to be like 30% and the add to cart button 60%, so that there is always a distance of 10%.

[Ujjaval]

@monaim_ouadah
add below code

@media (max-width:961px)
{
.product-form__buttons {
    max-width: 44rem;
    width: 62% !important;
    margin-top: -73px;
    margin-left: 42%;
}
}
.button:after, .shopify-challenge__button:after, .customer button:after, .shopify-payment-button__button--unbranded:after {
    box-shadow: none !important;
    }