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.
No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.
| 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 4 years, 8 months 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.
