Страница Woocommerce Checkout Таблица просмотра заказа Название продукта и количество Колонки слишком узкие

Question

У меня есть сайт Woocommerce с темой Ocean WP. Страница заказа, таблица обзора заказа, линия продуктов испорчена. Название продукта, количество продукта и количество продукта сжаты в маленькие узкие столбцы на Mobile Only .

Я бесконечно исследовал подобные проблемы и не могу найти что-то подобное. Я попытался изменить ширину таблицы безрезультатно. Как я могу увидеть, что мешает столбцам занимать всю ширину таблицы?

Вот что я пробовал:

@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;}   }

Вот ссылка: https: // ****. com / checkout /

См. скриншот.

Страница Woocommerce Checkout - Обзор заказа

Answer 1

Проблема не в вашем коде, а в том, что ячейки таблицы являются блоком отображения на этой ширине экрана.

Это установлено в WooCommerce CSS из вашей темы "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;
    }
}

Для отмены вышеописанного добавьте:

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