How to align variant and quantity in the same line ?

[mpatsi]

Greetings

Hello, i want to align variant picker and quantity in the same line both for mobile and desktop. Does anyone knows how to do that?

Thanks in advance

[HazilStudiosNYC]

Hey!
I did the same not too long ago. Can you share your store url, then I should be able to provide the actual code.

Best,
Flo

[mpatsi]

Hi, and thanks for reply

https://hairworkshop.gr/products/volume-senses-amplifying-shampoo

[HazilStudiosNYC]

This sadly requires an actual code change not just CSS, since in your theme they are two different components.
If you are liquid savy, you want to merge the quantity selector with the variant selector file, and make the container a flex-box.

If you’re uncomfortable making the changes I can help you as well. Simply send me a dm

Best,
Flo

[Moeed]

Hey @mpatsi

Follow these Steps:

1. Go to Online Store
2. Edit Code
3. Find theme.liquid file
4. Add the following code in the bottom of the file above tag.

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[mpatsi]

Hi, thanks for helping, in the desktop is fine but in mobile do not work unfortunately.

[Moeed]

Hey @mpatsi
Keep the previous code and add this code as well right above

@media only screen and (max-width: 480px) {
.product-form__input .select {
    max-width: 18rem;
}
quantity-input.quantity {
    float: right;
    margin-top: -65px;
}
}

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[mpatsi]

That works perfectly! Thanks man.

[HazilStudiosNYC]

Hmm while this works, I’m not a fan of the solution as it’s just a layout hack.
It works on specific sizes but it’s more a patch rather than a solution.

See screenshot for tablet version