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

Home Forums Support How can I fix this spacing on checkout page?

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #1387853
    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

    #1388039
    David
    Staff
    Customer Support

    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;
    }
    #1388610
    Liam

    Perfect! Now it looks exactly like it should.

    Thank you so much!

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.