Impulse Theme: Quantity align with add to cart button in one row

[Tthetiger365]

Hello,

I currently have the latest version of the Impulse theme and want to make the quantity widget align with the Add To Cart button in the same row for both mobile and desktop.

Currently, it looks like this:

Is it possible to make look like this?

I tried custom CSS from other threads but had no luck. I hope someone can help me, thank you!

[KetanKumar · Accepted solution]

@Tthetiger365 

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

@media (min-width:769px) {
.product-single__form {
    margin-top: -73px;
    margin-left: 110px;
}
.product-single__meta .js-qty__num {padding: 10px 20px;}  
}

[made4Uo]

Hi @Tthetiger365,

Are you able to provide your website so we can give a code specific for you?

[Tthetiger365]

Hello,

Thanks for your response!

The store is currently under development so please ignore all other pages than the product page.

https://clearlucent.com/products/vitamin-c-20-e-ferulic-serum

PW is euffus

Thank you!

[suyash1]

@Tthetiger365 - it can be done, the issue is that it will need multiple settings and on some screens, it can create issues, something like this

[KetanKumar · Accepted solution]

@Tthetiger365 

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

@media (min-width:769px) {
.product-single__form {
    margin-top: -73px;
    margin-left: 110px;
}
.product-single__meta .js-qty__num {padding: 10px 20px;}  
}

[Tthetiger365]

@KetanKumar

Thank you for your solution! However, it's not working on mobile view. Can you please help me?

[KetanKumar · Accepted solution]

@Tthetiger365 

sorry for late here 

yes, please add this code mobile  device issue 

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

@media (max-width:768px) {
.product-single__form {
    margin-top: -69px;
    margin-left: 90px;
}
.product-single__meta .js-qty__num {padding: 10px 20px;}  
.product-block {
    text-align: left;
} 
.product-block .btn--full {
    font-size: 11px;
    padding: 13px 10px;
}    
}

confirm 

[KetanKumar]

@Tthetiger365 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[wickedbride]

Hi KetanKumar - I'm looking to do the same thing, but because I have a live preview app installed, when I tried using your code, it stuck the quantity box up next to the swatches. I'm building the site so I only have a preview link available - if you click on Shop --> Planning Binders --> then select any of the binders, you can see a product page example. Would appreciate any advice, I'd like it to work on desktop AND mobile - thank you!

https://koibkarvtxefwe9k-34171617415.shopifypreview.com

[KetanKumar]

@wickedbride oh sorry for that issue can you please check and confirm this look?

[wickedbride]

Hi KetanKumar - yes! That's exactly what I'm trying to accomplish, but can't seem to get it to work on either desktop or mobile. It kept forcing the quantity box above the variations, so I moved it below the buy button, but I'd love to have them aligned just like you have shown here!