Coupon section in checkout has broken layout

Hey, the layout of my coupon section is broken on small devices. How do I get it back to how it was before? I have attached two screenshots; one of how it should be (how it is on larger devices as well) and one of how it is now on phone devices. How do I fix the layout? Thank you so much.

Attachments:

You must be logged in to view attached files.

Hello,

To fix this issue, try to add the following code snippet to the Custom CSS area in Theme Settings.

.checkout_coupon.woocommerce-form-coupon .form-row-first {
   flex: 1 0 0%;
}

Kind Regards

Hello, this did not work unfortunately. Do you have another solution? Looking forward to hearing from you.

Hi,

The previous code only affected the coupon layout itself. If you also want to modify the layout of the toggle that opens the coupon section, add the following custom code next to the previous one.

.wd-page-content :is(.woocommerce-form-coupon-toggle, .woocommerce-form-login-toggle)>div {
    display: block;
    text-align: var(--wd-align);
}

When applied correctly, the custom code will result in the following appearance: https://monosnap.com/file/VAB9JebotjiqiiwujsReDnncVqQUmu

Kind Regards

Amazing, that worked. Thank you so much. Really great customer support!

You are always welcome.

[Author]

Posts