Title: Checkout fields width cropped?
Last modified: January 28, 2018

---

# Checkout fields width cropped?

 *  Resolved [tahuphoenix](https://wordpress.org/support/users/tahuphoenix/)
 * (@tahuphoenix)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/checkout-fields-width-cropped/)
 * Hi All,
 * I’m new to WP and to the world of .php, so apologies if this is an easy-to-solve.
 * I’ve installed the Woocommerce plugin on-top of a theme which I knew didn’t have
   support for Woocommerce, however up until this point I’ve been able to work around
   it.
 * The problem comes when I try to add the [woocommerce_checkout] on my checkout-
   page and I the checkout fields width are being cropped (see [https://imgur.com/a/kfer7](https://imgur.com/a/kfer7)).
   This is weird, because if I scroll down to the “Your order” fields, they are 
   perfectly sized.
 * I’ve been looking for hours on how to resolve this particular issue but most 
   of the resolutions involve changing the whole theme. If anyone could advise on
   how to approach this, it would have been very apperciated.
 * All the best,
    Tahuphoenix

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

 *  [Peter Lawrenson](https://wordpress.org/support/users/lorro/)
 * (@lorro)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/checkout-fields-width-cropped/#post-9910670)
 * Its likely that some custom css will resolve the problem. Themes and mark up 
   vary, so please post the url to your site so the styles can be examined with 
   browser tools.
 *  Thread Starter [tahuphoenix](https://wordpress.org/support/users/tahuphoenix/)
 * (@tahuphoenix)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/checkout-fields-width-cropped/#post-9911396)
 * Hi [@lorro](https://wordpress.org/support/users/lorro/),
 * Thanks a lot for your response. Please see the steps below:
 * – Go to [http://public.deklira.se/shop/](http://public.deklira.se/shop/) and 
   add the test product to the basket
    – Go to [http://public.deklira.se/checkout/](http://public.deklira.se/checkout/)
   and click “Proceed to checkout” – See results
 *  [Peter Lawrenson](https://wordpress.org/support/users/lorro/)
 * (@lorro)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/checkout-fields-width-cropped/#post-9911841)
 * Try this custom css:
 *     ```
       .checkout .col-1,
       .checkout .col-2 {
         -webkit-flex: none;
         -ms-flex: none;
         flex: none;
         max-width: none;
       }
       ```
   
 * Custom css can be entered at:
    Dashboard > Appearance > Customise > Additional
   CSS
 * There are a few other problems with that theme. Changing theme is the best way
   forward. Consider trying Storefront or Virtue free.
 *  Thread Starter [tahuphoenix](https://wordpress.org/support/users/tahuphoenix/)
 * (@tahuphoenix)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/checkout-fields-width-cropped/#post-9932437)
 * Apologies for my late reply [@lorro](https://wordpress.org/support/users/lorro/),
   and thanks a lot for the help! I know it would be easier to use a compatibile
   theme, but I really like this one and see it as a learning opportunity in terms
   of CSS and php.
 * I’m incorporated your change as well as made some other changes to make it looks
   better. One of the last things I would want to get rid of is the “dot” that keeps
   hanging on selection of payment methods (even though I only have one payment 
   method available). I can’t see that there is any div for it, do you know how 
   to hide it? Please see attached screenshot [https://imgur.com/a/DYE5n](https://imgur.com/a/DYE5n)
   and follow the previous procedure to see it again at the checkout.
 * – Go to [http://public.deklira.se/shop/](http://public.deklira.se/shop/) and 
   add the test product to the basket
    – Go to [http://public.deklira.se/checkout/](http://public.deklira.se/checkout/)
   and click “Proceed to checkout” – See results at the bottom of the page
 *  [Peter Lawrenson](https://wordpress.org/support/users/lorro/)
 * (@lorro)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/checkout-fields-width-cropped/#post-9932471)
 *     ```
       #payment li {
         list-style: none;
       }
       ```
   
 *  Thread Starter [tahuphoenix](https://wordpress.org/support/users/tahuphoenix/)
 * (@tahuphoenix)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/checkout-fields-width-cropped/#post-9934600)
 * Thanks again [@lorro](https://wordpress.org/support/users/lorro/), marking this
   one as resolved now!

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

The topic ‘Checkout fields width cropped?’ is closed to new replies.

 * ![](https://ps.w.org/woocommerce/assets/icon.svg?rev=3234504)
 * [WooCommerce](https://wordpress.org/plugins/woocommerce/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/woocommerce/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/woocommerce/)
 * [Active Topics](https://wordpress.org/support/plugin/woocommerce/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/woocommerce/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/woocommerce/reviews/)

 * 6 replies
 * 2 participants
 * Last reply from: [tahuphoenix](https://wordpress.org/support/users/tahuphoenix/)
 * Last activity: [8 years, 4 months ago](https://wordpress.org/support/topic/checkout-fields-width-cropped/#post-9934600)
 * Status: resolved