Hi @kman22,
The Checkout page has everything aligned left?
I’ve looked at your site and this is as a result of some styles you added in your theme’s bootstrap.css file.
I’ve pasted the relevant bits of CSS code below with the offending lines commented out. Removing them cause your checkout page to return to some semblance of normalcy as you can see in this screenshot – http://cld.wthms.co/ecAcVS
.col-1 {
-webkit-box-flex: 0;
-ms-flex: 0 0 8.333333%;
flex: 0 0 8.333333%;
/* max-width: 8.333333%; */
}
.col-2 {
-webkit-box-flex: 0;
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%;
/* max-width: 16.666667%; */
}
You may want to remove the flex and -ms-flex lines as well if you find that browsers other than Chrome continue to be impacted.
Cheers
Thread Starter
kman22
(@kman22)
Thank you for the reply but a couple of issues:
1. This problem appears when I use both Firefox and Chrome as well.
2. The additional notes section is appearing correctly?
It is strange as I have never come across this issue before and I have been using this plugin for years now.
Thanks again
Thread Starter
kman22
(@kman22)
As well I have added the CSS code provide and still the same issue remains.
Thanks
@kman22,
Copying the code won’t do you any good. You need to search your bootstrap.css file for the .col-1 and .col-2 bits and comment out the same lines I commented out i.e. the lines surrounded by /* */.
I’d recommend disabling that plugin and seeing if that fixes things. This is certainly not an issue with WooCommerce as you can see in the screenshot I provided that disabling those lines of CSS returns some semblance of normalcy to your checkout page.
You can also test with a theme like Storefront to see if this is an issue with your theme.
@luminus,
We haven’t heard back from you in a while, so I’m going to mark this as resolved – if you have any further questions, you can start a new thread.
