Checkout fields width cropped?

Resolved tahuphoenix
(@tahuphoenix)

8 years, 4 months ago

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 ). 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
(@lorro)

8 years, 4 months ago

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
(@tahuphoenix)

8 years, 4 months ago

Hi @lorro,

Thanks a lot for your response. Please see the steps below:

– Go to http://public.deklira.se/shop/ and add the test product to the basket
– Go to http://public.deklira.se/checkout/ and click “Proceed to checkout”
– See results
Peter Lawrenson
(@lorro)

8 years, 4 months ago
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
(@tahuphoenix)

8 years, 4 months ago

Apologies for my late reply @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 and follow the previous procedure to see it again at the checkout.

– Go to http://public.deklira.se/shop/ and add the test product to the basket
– Go to http://public.deklira.se/checkout/ and click “Proceed to checkout”
– See results at the bottom of the page
Peter Lawrenson
(@lorro)

8 years, 4 months ago
```
#payment li {
  list-style: none;
}
```
Thread Starter tahuphoenix
(@tahuphoenix)

8 years, 4 months ago

Thanks again @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.