This thread is resolved. Here is a description of the problem and solution.
Problem: When Bootstrap 4 is active, there is a display issue on the WooCommerce checkout screen. The two columns of content are shrunk horizontally.
Solution: For a temporary fix, use the following CSS code:
.woocommerce-checkout .col-1, .woocommerce-checkout .col-2 {
max-width: inherit;
}
.woocommerce-input-wrapper {
width:100%;
}
This will resize the content columns and input fields as a temporary solution.
This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.
Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
| 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | - | - |
| 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | - | - |
Supporter timezone: America/New_York (GMT-04:00)
This topic contains 6 replies, has 3 voices.
Last updated by andrewD-10 4 years, 1 month ago.
Assisted by: Christian Cox.
Hello
This appears to be a WooCommerce and Bootstrap 4.x issue so might not be able to be solved here - but is definitely relevant to Toolset developed sites!
I recently update to the latest version of WooCommerce and I have Bootstrap 4.x (4.3.1) being loaded by Toolset. At some point, however, the Checkout page started displaying incorrectly.
It appears to be a conflict with both WooCommerce and Bootstrap 4.x BOTH using the classes col-1 and col-2.
See screenshot... The two Billing/Address columns are all mucked up. See also the screenshot of the CSS being loaded!
Note: The Checkout displays correctly with Bootstrap 3.x.
Thanks
Gavin
P.S. I am on to WooCommerce support about this issue too.
