variant picker error on product page

[Domisana]

Hi, I am using Dawn theme and my website is domisana.com

I recently coded my CSS to make my variants in the same row since this is not default option for my theme.

I got the results I want 

But now there is an error both on PC and mobile whenever I click on some of the variants entire row duplicates like this for a second, giving really buggy feeling, this is what it looks like

I disabled this CSS temporary but does some know how to fix this?

For example you can try to test it on this page https://domisana.com/products/cozy-plush-rabbit-slippers

since this product has 3 variants and it's most complex

Thanks,

Dimitrije

[Hasan112]

I do not understand that, i check ur website its fine. let me know the issue 

[Domisana]

Sorry, apply first this CSS code, that is what I did, but when I click on variants then the duplicate like in the photo I shown you

@media screen and (max-width: 768px){

variant-selects {

display: flex !important;

width: 33% !important;

gap: 4px !important;

text-align: center !important;

} } 

[Hasan112]

Okay no issue, now ur problem is solved ?

[Domisana]

No because when I use this code variants duplicate when you click on them they buglike this

[LizHoang]

Hi @Domisana ,

Thank you for your question!

Please go to Theme editor > Theme settings > Custom CSS to add this code:

variant-selects .product-form__input {
    flex: 1 !important;
}

variant-selects {
    display: flex !important;
    flex-wrap: wrap;
}

.product-form__input:nth-child(1) {
    margin-right: 15px;
}

You should get the result as below, please note that we couldn't adjust it to 1 row of 3 boxes as you show because the size has long content so if we leave it 1 row of 3 boxes you won't be able to see all the content. I believe keeping it like this is beautiful.

I hope you found this helpful!

Best,
Liz.

[Domisana]

Thanks, but did you actually try to click and pick other variant, it still has this bug where whenever you try to change some variant entire variant row duplicates for a second, no use to using this CSS if it is going to do that bug