[BUG] Mobile-Version when using Elementor-Builder
I want to use the Elementor Builder for the Checkout-Pages but there seem to be a bug: In mobile the Form (Shortcode) tries very hard to stay in two columns and I can't find any way to change that. Even when I set both rows to 100%, it keeps that way.
For some reason, when I use the normal Gutenberg-Builder and just add the Shortcode, it works perfectly fine. But as soon as I activate the Elementor-Builder, it gets buggy.
Here is the Checkout-Page of my Test-Product: https://online-business.club/checkout/?fct_cart_hash=7a35effa68ccbb96fff83e4a645bd553
We reproduced the issue with the FluentCart Checkout widget in Elementor. On mobile, the form and order summary stack vertically, but their desktop column widths remain active, causing both sections to appear too narrow.
As a temporary workaround, please add the following under Appearance → Customize → Additional CSS:
@media (max-width: 767px) {
.elementor-widget-fluent_cart_checkout .fce-checkout-form-column,
.elementor-widget-fluent_cart_checkout .fce-checkout-summary-column {
width: 100% !important;
}
}After saving it, please regenerate Elementor’s CSS from Elementor → Tools → General → Regenerate CSS & Data, then clear any site or CDN cache.
We have identified the underlying cause, and the permanent correction is planned for the upcoming FluentCart Elementor add-on release. In the meantime, the CSS above will keep both checkout sections at full width on mobile.