How can I align the quantity selector with the add to basket button?

[Deoxes]

Or someone who knows how to set it up.

I show in the pictures, I wanna make my quantity selector in the same line as add to basket, like here:

My Theme: Impulse

Website: dehome.co.uk

Thanks.

[ZestardTech]

Hello there,

The structure of this has to be changed.
not possible by css.

[Deoxes]

@ZestardTech I saw a lot of people fixing it just simply adding some code and that’s it mate

[KetanKumar]

@Deoxes

can you try this code

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

@media only screen and (min-width: 769px) {
.product-block:nth-child(7) {
    margin-top: -69px;
    width: calc(100% - 90px);
    margin-left: 90px;
    height: 36px;
}
}

[Deoxes]

@KetanKumar Can you make the same size for me, please?

Size like Add to Basket.

[KetanKumar]

@Deoxes

yes, please remove the first code and add this code

@media only screen and (min-width: 769px) {
.product-block:nth-child(7) {
    margin-top: -74px;
    width: calc(100% - 90px);
    margin-left: 90px;
    height: 36px;
}
.product-block .js-qty__num {padding: 10px 20px;}
}

[Deoxes]

@KetanKumar I don’t know maybe is sounds like crazy, but maybe can just up a bit, bit to make incorrectly same line? If it possile?

[KetanKumar]

@Deoxes

please confirm this

[Deoxes]

@KetanKumar

Ok mate look, I don’t know how to check like you but I maked few photos.

And one more thing when I going with my phone look whats happening:

I’m using incognito window.

Thanks

[KetanKumar]

@Deoxes updated code

@media only screen and (min-width: 769px) {
.product-block:nth-child(7) {
    margin-top: -74px;
    width: calc(100% - 90px);
    margin-left: 90px;
    height: 36px;
}
.product-block .js-qty__num {padding: 11px 20px;}
}

[Deoxes]

@KetanKumar It’s seems like good, but have trouble with mobile if I going look how it’s shows:

Thanks.

[Deoxes]

@KetanKumar It’s possible make that quantity sligtely round corners like add to basket button?

[Deoxes]

@KetanKumar Can you help me fix with mobile, thanks.

[KetanKumar]

@Deoxes

yes, remove last code add this

.product-block:nth-child(7) {
    margin-top: -74px;
    width: calc(100% - 90px);
    margin-left: 90px;
    height: 36px;
}
.product-block .js-qty__num {padding: 11px 20px;}

.product__quantity {
    text-align: left;
}

[Deoxes]

@KetanKumar

This is on mobile:

[Deoxes]

@KetanKumar

[Deoxes]

@KetanKumar I add your last code which you gave me for both and pc and mobile, but after that look in mobile:

Not in the same line.

Please fix this issue, thanks.

[KetanKumar]

@Deoxes

yes, please add this code

@media only screen and (max-width: 768px) {
.product-block:nth-child(7) {margin-top: -72px;}
}

[Deoxes]

@KetanKumar Thanks for code, but look.

This mobile:

That black add to basket it’s seems a bit higher then quantity, anyway I need fix one more thing maybe it’s fix all issues.

I show with picture for you to be easier explain.

Can you make that add to basket button like this one:

But when you going with mouse or touching it’s switching:

To black colour.

Maybe that line to line with quantity it will fix.

And last thing: Please add near add to basket “bag”

But can you add bag like in my shop:

I know here a lot of work maybe but if you help me with that I be very big thank you !

And can you fix for both pc and mobile to work.

[KetanKumar]

can you please share add to cart code so i will added bag icon