Display Variant Selector And Quantity On Same Line (Dawn Theme)

[BraxtonEcom]

I would like the two selectors to be half and half to fit the same size as the ‘buy now’ button, like I’ve drawn on the attached image.

URL: https://tyton.uk/products/hard-drive-recovery-converter

I would like it to be viewed like this on all devices.

I have used this code on a different theme template in the past and it’s worked, but I’d like the code for this new product theme template now too (I think I know to change the end part of the first line of code but not sure what to change it to):

variant-selects#variant-selects-template–16042998333606__main {
float: left;
width: 49.5%;
}
.product-form__quantity {
float: right;
width: 49.5%;
min-width: unset;
}
.product-form__quantity + div {
clear: both;
}
.product-form__buttons {
max-width: 100%;
}
quantity-input.quantity {
width: 100%;
}width: 50%;
}

[EBOOST]

Hi @BraxtonEcom

May I suggest to update code these steps:

1. Go to Store Online-> theme → edit code

2. Assets/base.css
3. add code below to end of file

.product__info-wrapper variant-radios, .product__info-wrapper variant-selects {
    width: 49.5%;
    float: left;
}
.product__info-wrapper .product-form__input .select {
    max-width: none;
}

[INA_MSWEB]

Hi @BraxtonEcom

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the css file:
#variant-selects-template–16079859810470__main {width: 48%; float: left;}

Regards,

San