Return to previous page

Layout Glitches – Checkout - by mleihs

This topic has 9 replies, 2 voices, and was last updated 6 years, 3 months ago ago by Rose Tyler

mleihs

Participant

January 10, 2018 at 17:26

Hi,

I noticed that one label of the checkout related fields gets squeezed between two others.

-> http://snap.ashampoo.com/3Iq4NftY

The text fields are a breaking out of the layout too.

-> http://snap.ashampoo.com/I5E0onYp

Do you have any recommendations on how to fix this?

Best regards

Please, contact administrator
for this information.

#181530 Copied

8 Answers

mleihs

Participant

January 11, 2018 at 08:47

Please ignore the second screenshot from the post above. That was caused by WooCommerce Germanized.

I found two other glitches:

http://snap.ashampoo.com/eoEbSnqR (tax information should get rendered in a new line, below the total price)

http://snap.ashampoo.com/89uvdbtd (tax information should get rendered in a new line, below the total price, “1,81 €” should be the same size as “Mwst 10%”

Best regards

#181547 Copied
Rose Tyler

Support staff

January 11, 2018 at 10:03
Hello,

Please try to add this custom css code in style.css file of child theme:
```
#billing_company_field, #shipping_company_field {
    clear:both;
}
.woocommerce-checkout-review-order-table .order-total .includes_tax {
    display:block;
}
```
Regards
#181570 Copied
mleihs

Participant

January 11, 2018 at 11:07

Hi,

thanks for the quick reply. I added the css to the style sheet.

This one:

I noticed that one label of the checkout related fields gets squeezed between two others.

-> http://snap.ashampoo.com/3Iq4NftY

… is still an issue. Same problem with this field: http://snap.ashampoo.com/sag83Ggi

This one looks better but everything is in the same line now and the second amount (tax) is as large as the total one.

http://snap.ashampoo.com/89uvdbtd (tax information should get rendered in a new line, below the total price, “1,81 €” should be the same size as “Mwst 10%”

Best regards

#181581 Copied

Rose Tyler

Support staff

January 11, 2018 at 11:30

Please delete code that you added. I’ve added custom css code in Custom css for checkout page http://prntscr.com/hyx61m so clear cache and check the page now.

Regards

#181584 Copied

mleihs

Participant

January 16, 2018 at 18:27

Hi,

thanks again for your efforts. That worked out great!

I found another small glitch: http://snap.ashampoo.com/E5MoQA5z

It seems the “X” pushes the other elements out of the center.

Is that working as intended?

Best regards

#182099 Copied
Rose Tyler

Support staff

January 17, 2018 at 09:11
Hello,

You’re welcome!
This is not a bug, the same you may see on our demo http://prntscr.com/i1k2e6
But try to use this custom css:
```
.cart-table-section .shop_table .woocommerce-cart-form__cart-item td {
  text-align: center !important;
}
.cart-table-section .shop_table .woocommerce-cart-form__cart-item .quantity-box{
  width: 65px;
  float: none;
  margin: 0 auto;
}
.cart-table-section .shop_table .woocommerce-cart-form__cart-item .quantity-box .quantity {
  left: auto;
  right: auto;
  -webkit-transform: translateX(0);
         -ms-transform: translateX(0);
             transform: translateX(0);
  float: none;
}
```
Regards
#182137 Copied
mleihs

Participant

January 18, 2018 at 21:58

Hi,

thanks a lot. That improved the situation. Maybe it would be a good idea to add a column for the “X” in future versions of the theme? But it’s really a minor issue.

Thanks for taking care!

Best regards

#182287 Copied

Rose Tyler

Support staff

January 19, 2018 at 07:41

You’re welcome!
Have a nice day.

Regards

#182303 Copied
Viewing 9 results - 1 through 9 (of 9 total)