Woocommerce Checkout Fields Overlapping & Layout

  • Resolved dipper84

    (@dipper84)


    7 years, 2 months ago

    Hi All,

    Im struggling to find a resolution for my Checkout input fields, for some reason they are all overlapping each other and the form itself is a bit of a mess.

    Ive tried various codes that I have found on a number of Forums but nothing seems to work. Im becoming a little desperate now.

    Thanks

    Chris

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support slash1andy

    (@slash1andy)

    Automattic Happiness Engineer

    7 years, 1 month ago

    Hey there!

    It looks like the theme you are using is setting all columns (including WooCommerce ones) to have a max-width of just over 8% of the potential size, so that would explain the issues you are seeing.

    I wrote a tiny snippet of CSS that you can use to bring it back up to the correct 48% of the page per column, which should do the trick for you.

    You can add this in the customizer.

    .woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2, .woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1 {
max-width: 48% ; 
}

    Hopefully that helps! Have a great one!

    • This reply was modified 7 years, 1 month ago by slash1andy.
    Thread Starter dipper84

    (@dipper84)

    7 years, 1 month ago

    Hi Andrew!

    You are my hero! Thank you ever so much for that code. That has been bugging me as I do my best to try and help myself before asking.

    Thanks again, you’re a star!

    Chris 🙂

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Woocommerce Checkout Fields Overlapping & Layout’ is closed to new replies.