Need code for side by side variants and add to cart (in a grid of 4).

I would like to have the variants 'Size' & 'colour' side by side, and below it have the 'quantity' and 'add to cart' side by side. so its like in a grid of 4? What is the custom CSS for this? 

@tuanphan

46 minutes ago, Peter550 said:

Site URL: https://www.saccostyle.com/

I would like to have the variants 'Size' & 'colour' side by side, and below it have the 'quantity' and 'add to cart' side by side. so its like in a grid of 4? What is the custom CSS for this? 

 

@tuanphan

Hi. you can use below code for it. copy/paste code into CSS editor
 

@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: 49% !important;
            margin-right: 10px !important;
        }
        .sqs-add-to-cart-button-wrapper {
            flex-basis: 48% !important;
        }
    }
}

I'm afraid this doesnt work! @Agha_Waqas

1 hour ago, Peter550 said:

Hi. May be you were doing something wrong. That code was working for me. If possible you can inbox me logins l will fix this or other issues. These are not quite complex issues. 

Have DM'd you