Checkout review order table bleeds out of the border on smartphones

  • Hi, i have an issue with the order review table, where because in the shipping i have an extra fields, the line in the table is too big and makes all the lines in the table bleed out.

    I have tried using this css to make the shipping line wrap, but it seems all the width of all the th and td elements is connected. can you help me make the td element of the shipping line wrap bellow the th element and the two of them take the full width available, while the rest of the lines work independently?

    https://snipboard.io/HsXLP9.jpg

    Please take a look at this image i hope it helps explain what i need.


    @media (max-width: 600px) { 
    .woocommerce-shipping-totals.shipping {
        width: 100%;
    }

    .woocommerce-shipping-totals.shipping th,
    .woocommerce-shipping-totals.shipping td {
        width: 100%;
        display: block;
    }

    .shipping td{
        width: 100%;
    }
    }

    Thank you in advance. Dimos

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)

  • Hi @19db,

    Since the td and th elements appear working in sync, you might need to add an id or class for the specific headings or table rows and adjust them accordingly. Also, I would suggest testing it with the Storefront theme to see if it’s working with the default WooCommerce theme.

    Kind regards,
    Aradhy ??

Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.