Thanks very much for input, I've been wrestling with this for quite a while now!
That link topic is very close, however from what I can tell they're putting 2 variants next to each other, then the quantity next to the 'Add to cart' button.
In any case, like the original poster, the code doesn't work for me - nothing changes when the CSS is added. The only thing that has seemed to progress things is to add:
.variant-select-wrapper {
width:50% !important;
}
Which seems to get the dropdown the correct width, however it's still stacked as in the image. All I'm trying to get is the quantity dropdown to move up, I'm fine for the button to stay exactly as is.
Here's the code from the link sent, with the additional lines at the end which are changing the dropdown width.
Thanks so much!
@media (min-width: 768px) {
.ProductItemVariants {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
.ProductItem-product-price {
flex-basis: 100% !important;
}
.ProductItem-details-excerpt {
flex-basis: 100% !important;
order: 2;
}
.product-variants {
flex-basis: 100% !important;
.variant-option {
margin: 0 10px 0 0;
}
}
.product-quantity-input {
flex-basis: 48% !important;
margin-right: 10px !important;
}
.sqs-add-to-cart-button-wrapper {
flex-basis: 49% !important;
}
}
}
.variant-select-wrapper {
width:50% !important;
}