[Resolved] Resize Woomerce Add to Cart with Variations (mobile only)

[Brian]

Hi,
I have created custom quick-view popups for this site: mikava.coffee
They are tricky to resize (done with Elementor (Pro) templates and Popup Maker plugin), but I had them looking as the clients wanted until we added new subscription options. With the subscription variation, the add to cart section spills out of the popup and looks terrible. Basically, what I’ve been trying to do for the last hour is transform the table by about 80% and center it or align it on the left so that it looks correct. This works in Chrome’s developer tools, but nothing I add to custom CSS works. Do you have any idea how I can shrink up that table? It is only a mobile issue, as it looks good on desktop.
Thanks for your help!

[Ying]

Hi Brian,

You mean the single product page? Try this CSS:

@media (max-width: 768px) {
    .woocommerce div.product form.cart .variations select, .woocommerce div.product form.cart .variations select {
        width: 200px;
        }
}

[Brian]

Hi Ying,
Thank you for checking. I did not mean that page actually, but since you mentioned it, I just checked on a different mobile device and it is also an issue (the same issue). However, this CSS didn’t do the trick sadly (no matter what I set the width to, it has no effect. So, in addition to trying to fix it on the single product page, the original (and worse looking problem) is on the “quick views”. These are accessed via the “quick view” buttons on the home page by the two coffees (Gesha Marsella and Ethiopian Celestial). Basically, I just need the variations (weight and subscription) and their drop-downs to auto-scale down to fit properly.
Thank you!

[Ying]

Give this a try:

@media (max-width: 768px) {
    table.variations tbody td.value {
        display: flex;
        width: 190px;
    }
}

[Brian]

No luck either. I’m adding these to additional CSS in the customizer, is that all right? I know Woocommerce seems to override a lot of things, so if that doesn’t work, I’m not sure where I’ll need to add these.
Thank you!

[Ying]

The css should work.

But I don’t see the CSS has been added to your site, are you using any cache plugin?
https://www.screencast.com/t/Ftx9A9T5ZkY

Could you try to clear cache and disable cache plugin if you are using one.
Let me know 🙂

[Brian]

I’ve just been testing the CSS in the customizer, and it has no effect. Would publishing the changes possibly override any Woocommerce difficulties that hide the changes in the customizer? Usually I can just try CSS additions and see the effects in the customizer before publishing.
Thank you!

[Ying]

Oh you never published it? That’s why!

Customizer sometimes doesn’t show the effect live, you’ll have to publish it to see the final result.

[Brian]

Ah, I’ve never experienced that before! haha
Now I’ve published it, but still no effect sadly 🙁

[Ying]

There are some errors when you added the CSS, // is not supposed to be used in CSS.

You could always check the CSS using this tool:
https://jigsaw.w3.org/css-validator/#validate_by_input

[Brian]

Ugh, thank you! That’s what I get for jumping between Google Script and CSS ;P
Looks good enough to me now.
Thanks for your patience and help!

[Ying]

You are welcome 🙂

Glad it finally works!

[Author]

Posts