Maca Template: dropdown width for products

Hi All,

Can someone please help.

I'm really struggling trying to get the product variant and quantity all on one line on desktop.

How do I get the 2 divs alongside each other on this viewport size?

See screengrab attached - 'quantity' dropdown is wrapping to a new line.

pw Coopers

Thanks
Phil

Can you share your website URL?

Sorry though it came through in the form, here you go.

Many thanks!

https://raccoon-octagon-tg8x.squarespace.com

I think this thread should help:

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;
}

This worked great, thank you so much @tuanphan !

Hero.

I've just been doing some final testing and unfortunately there's a bug with this when you click the 'add to cart' button. It then makes the button very large and hovers over the dropdowns. It only disappears once you refresh the page. Is there anything I can do to revert to the original layout?

Screengrab attached.

Many thanks!

On 4/13/2023 at 5:04 AM, Phil_FD said:

I've just been doing some final testing and unfortunately there's a bug with this when you click the 'add to cart' button. It then makes the button very large and hovers over the dropdowns. It only disappears once you refresh the page. Is there anything I can do to revert to the original layout?

Screengrab attached.

Many thanks!

Can you share link to this product? We can check easier

Thanks for getting back to me. It's any product, but here's an example:

https://raccoon-octagon-tg8x.squarespace.com/shop/p/finca-el-paraiso-coffee

Coopers

On 4/20/2023 at 6:02 PM, Phil_FD said:

Thanks for getting back to me. It's any product, but here's an example:

https://raccoon-octagon-tg8x.squarespace.com/shop/p/finca-el-paraiso-coffee

Coopers

Add this to Design > Custom CSS to fix problem

.ProductItem-details .sqs-add-to-cart-button-wrapper {
    clear: both !important;
}

Worked great, thank you so much 🙂