- This topic has 2 replies, 2 voices, and was last updated 3 years, 8 months ago by Liam.
Viewing 3 posts - 1 through 3 (of 3 total)
-
AuthorPosts
-
August 5, 2020 at 1:19 am #1387853Liam
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
August 5, 2020 at 5:03 am #1388039DavidStaffCustomer SupportHi 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; }
August 5, 2020 at 11:48 am #1388610LiamPerfect! Now it looks exactly like it should.
Thank you so much!
-
AuthorPosts
Viewing 3 posts - 1 through 3 (of 3 total)
- You must be logged in to reply to this topic.