Handy Theme Tutorials

Print

Checkout table text misalignment on mobile and how to resolve

These days, if you get two years out of a device, that’s a lot, especially when you consider that many of us replace our cell phones every 20 months with the latest and greatest model. When it comes to technology, lifespans are short. You may also met such customers who felt inconvenience while trying to place the order within a little bit outdated device with screen width less than 640px. Some text warps and checkout area looks not so well.

/*--checkout order details table additional styles--*/
@media(max-width:640px) {
.woocommerce .checkout .woocommerce-checkout-review-order {
padding:5px;
}
}

Mentioned code helps to avoid elements misalignment within checkout order details area.

Just copy/paste it to wp-dashboard–>appearance–>customize–>additional CSS field, save changes and be ready to enjoy proper order table alignment:)

Leave a Reply

Your email address will not be published. Required fields are marked *