[Resolved] How can I fix this spacing on checkout page?

[Liam]

In the right column on the checkout page, it seems the spacing is way off and the shipping options are cramped. I’d like to be able to fix this without making the product descriptions above cramped for space if possible.

Here’s a screenshot to explain what I mean: https://bit.ly/3gwxgee

[David]

Hi there,

Tables are notoriously a pain the backside even before adding Woocommerce into the equation.
According to CSS specification its impossible to have variable width columns within various rows within a table….

But after a lot of head banging i (think i) may have found a better solution with this CSS:

/* Force table to behave with flexbox */
.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table {
    display: flex;
    flex-wrap: wrap;
}
/* Force all items to fill available space */
.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table * {
    flex: 1;
    box-sizing: border-box;
}
/* Force thead/tbody/tfoot to fill 100% of space */
.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table > * {
    flex: 1 0 100%;
}
/* Control table rows with flex */
.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tr {
    display: flex;
}
/* Make item descriptions 60%+ of the table width */
.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table thead th:nth-of-type(odd),
.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table .cart_item td:nth-of-type(odd) {
        flex: 1 0 60%
}
/* Fix tfoot headings ( subtotal, shipping etc.) to occupy maximum of 130px */
.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tfoot th {
    flex: 0 0 130px;
}
/* Corect text alignment on right hand columns */
.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table .cart_item td:nth-of-type(even),
.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tfoot td:nth-of-type(odd),
.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table thead th:nth-of-type(even){
    text-align: right;
}

[Liam]

Perfect! Now it looks exactly like it should.

Thank you so much!

[Author]

Posts