Woocommerce Checkout Page Order Review Table Product Name and Quantity Columns are too narrow

Question

I have a Woocommerce site with Ocean WP theme. The checkout page, order review table, product line is messed up. The Product Name and Product Quantity and Product Amount are compressed into small narrow columns on Mobile Only.

I have researched endlessly for similar issues and can't find something similar. I have tried modifying the table widths to no effect. How can I see what is blocking the columns from occupying the full width of the table?

Here is what I've tried:

@media only screen and (max-width: 600px) {
  tr.cart_item, td.product_name, td.product_total{
    width: 100% !important;
    padding: 0px !important;
    margin: 0px !important;}
  table.woocommerce-checkout-review-order-table .product-quantity {
    width: 200px !important;}   }

Here is the link: https://****.com/checkout/

See screenshot.

Woocommerce Checkout Page - Order Review

Answer 1

The issue is not with your code, but rather it's the table cells are display block at that screen width.

This is set this way in the WooCommerce CSS from your theme "OceanWP"

@media only screen and (max-width: 767px){
    .woocommerce-page table.shop_table td, .woocommerce-page table.shop_table_responsive td {
        display: block;
        text-align: right !important;
    }
}

To override the above add this:

@media only screen and (max-width: 767px) {
    .woocommerce-checkout .shop_table td.product-name, .woocommerce-checkout .shop_table td.product-total {
        display: table-cell;
    }
}