Flux checkout plugin styling issue

Hey napsteris,

Thank you for the inquiry.

Would you mind providing a screenshot of the issue and a direct link to the checkout page? You can use platforms like Savvyify, Imgur or Dropbox to upload and share the screenshot. Here are the steps to follow:

1.) Visit the website of your chosen platform, such as Savvyify, Imgur or Dropbox.
2.) Locate the option to upload a file or an image.
3.) Select the screenshot file from your computer or device and upload it to the platform.
4.) After the upload is complete, you will be provided with a shareable link or an embed code.
5.) Copy the link or code and include it in your message or response to provide us with the screenshot.

Thank you for taking the time to share the screenshot. It will help us better understand the issue you’re facing and provide appropriate assistance.

Best regards,
Ismael

Hi,
Thank you for the link to your site and the screenshot, I don’t know what the plugin style is meant to look like, but from your screenshot it looks like the border around the elements is the issue. I don’t think that disabling the theme style would be a good solution as I doubt the plugin includes the css required for all of the elements on the checkout page.
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field to remove the borders and slightly adjust a couple of elements for a better view:

.woocommerce-checkout td,
.woocommerce-checkout tr th:first-child, 
.woocommerce-checkout tr td:first-child,
.woocommerce-checkout tr:first-child th, 
.woocommerce-checkout tr:first-child td,
.woocommerce-checkout .flux-checkout__content-right #order_review tr.cart_item td, 
.woocommerce-checkout .flux-step #order_review tr.cart_item td {
    border: none;
}
.woocommerce-checkout div table.shop_table td {
    padding: 0;
}
.woocommerce-page .button {
    margin: 0;
}
.woocommerce form p.form-row input[type=text]#coupon_code {
	padding-right: 0;
}
.woocommerce-page .coupon-form td .checkout_coupon.woocommerce-form-coupon p.form-row-last {
    width: 41%;
}
.woocommerce-page .coupon-form td .checkout_coupon.woocommerce-form-coupon p.form-row-first {
    width: 50%;
}

Please see the screenshot in the Private Content area of the expected results.

Best regards,
Mike

Hi,
I’m not seeing this on the check out page, please see the screenshots in the Private Content area of what I see.
Please note that iPhones can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.

Best regards,
Mike

Hi,
Thank you for your patience, it looks like the plugin removes the page max-width in:
/wp-content/plugins/flux-checkout/assets/frontend/css/templates/modern/main.css
the plugin css also seems to override using a percentage so you must use a PX width, please try adding this css to your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 325px) { 
	.woocommerce-checkout .flux-checkout.flux-checkout--modern,.woocommerce-checkout .woocommerce {
		max-width: 320px;
	}
}
@media only screen and (min-width: 374px) and (max-width: 380px) { 
	.woocommerce-checkout .flux-checkout.flux-checkout--modern,.woocommerce-checkout .woocommerce {
		max-width: 375px;
	}
}
@media only screen and (min-width: 424px) and (max-width: 430px) { 
	.woocommerce-checkout .flux-checkout.flux-checkout--modern,.woocommerce-checkout .woocommerce {
		max-width: 425px;
	}
}
@media only screen and (min-width: 766px) and (max-width: 770px) { 
	.woocommerce-checkout .flux-checkout.flux-checkout--modern,.woocommerce-checkout .woocommerce {
		max-width: 768px;
	}
}
@media only screen and (min-width: 888px) and (max-width: 900px) { 
	.woocommerce-checkout .flux-checkout.flux-checkout--modern,.woocommerce-checkout .woocommerce {
		max-width: 890px;
	}
}

This seems to correct for all of the major mobile screen sizes on the checkout page, I don’t see what the conflict might be, but the checkout page doesn’t have this issue when the plugin is disabled.

Best regards,
Mike

Hi,
I’m not sure why you are seeing this, when I check it looks correct, please see the screenshot in the Private Content area.

Best regards,
Mike

Hi,
Please provide a screen resolution size for your sample devices so I can try to match on my desktop Dev Tools and examine closer.

Best regards,
Mike

Hi,

Thank you for the info.

We noticed that the theme on the site is quite outdated, at version 4.8.7.1. The latest version is now 6.0.2. Please update the theme to the latest version, add the following css code, and then temporarily disable the Enfold > Performance > File Compression settings. Let us know the result.
.

body.woocommerce-checkout {
    max-width: 100vw;
}

Best regards,
Ismael

Hi,

thanks! Its much much better. Now it fits well to all tested resolutions. But little detail.

To prevent scrolling, please update the previous modification with this code:

body.woocommerce-checkout {
    max-width: 100vw;
    overflow-x: hidden;
}

Best regards,
Ismael

Hi,

Great! Glad to know that this has been resolved. Please feel free to open another thread if you have more questions about the theme.

Have a nice day.

Best regards,
Ismael