Woocommerce checkout form messed up layout

Support
#1

Hi,
On my woocommerce checkout page, the layout of the form is weird. When I use a different theme, the billing and shipping fields are in 2 columns side by side. With this theme they are all full width, so I have huge fields for everything and they are super long - from one end of the page to the other. Also, some other formatting is off, like the field for cardholder name is on a different line than the label.

I contacted woocommerce and they said it has to do with the default CSS in the theme.

Can you please help me out with this to get it to look right?

Thank you!

#2

Hello There,

Thanks for writing in! In X and Pro Theme, by default, the Billing and Shipping fields is in fullwidth. Do you want to have it in two columns? If that is the case, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r) or in the customizer, Appearance > Customize > Custom > Edit GLOBAL CSS

.col2-set .col-1,
.col2-set .col-2 {
    float: left;
    width: 49%;
    margin-right: 2%;
}

.col2-set .col-2 {
    margin-right: 0;
}

.col2-set .col-2 h3 {
    margin-top: 0 !important;
}

Hope this helps. Please let us know how it goes.