variants on desktop not alligned correctly

[SMP01]

Hello,

On my desktop the variants do not allign correctly.

The variants are colour and quanity

They are next to each other but not even on the same line.

How do I make them appear one on top and the second variant underneath on desktop and and smaller screens.

It seems to appear correctly on mobile already.

See Link: https://smartmovieprojector.com/products/untitled-sep19_21-39?variant=49724805447994

Attached a screen shot of the issue.

All products that have two variants display the same issue.

Theme is debuitfy

thank you

[BSSCommerce-B2B]

Hi @SMP01 , 

I have reviewed your requirement, you just need to edit css script and the issue will be resolved.  You can follow my instructions! 

Step 1: Go to Admin -> Online store -> Theme > Edit code:

Step 2: Search for the file theme.css. And add this code snippet to the end of the file.

label.mb-1 {
    height: 50px !important;
}

Step 3: Save and reload home page.

=>> The result: 

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir! 

[BSS-TekLabs]

- Here is the solution for you @SMP01 
- Please follow these steps:
1. Go to Online Store --> Theme --> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head> and press 'Save' to save it

<style>
@media only screen and (min-width: 600px) {
label[for] {
    min-height: 51.2px !important;
}
}
</style>

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[Arif_Shopidevs]

Hello,

Step 1: Navigate to your Shopify admin panel and go to "Online Store."

Step 2: Click on "Themes" and then select  Edit code

Step 3:  Find base.css

.product__meta label.mb-1 {
    height: 50px !important;
}

 
This above code only take effect in product page, other wise it will effect whole site where this label is used.

Hope it will solve your issues.