[Resolved] Improper appearance of mobile Woocommerce cart page

Home Forums Support Improper appearance of mobile Woocommerce cart page

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1478054
    Jeff

    Hello Support. I have a messed up looking WooCommerce cart page on mobile. Desktop looks fine. On mobile, a colon (:) appears to the left of the product photo and the “X” inside a circle selection to clear the product is above the product listing rather than to the left of it. I have a OneDrive folder with screenshots here: https://1drv.ms/u/s!An2JeS0lVhKZiNg9k_VKaucnIcSYGQ?e=OFrWJg

    As you can see the desktop version looks good. The mobile version has the issues described above.

    Any ideas on how to modify the appearance on the mobile cart page so it looks “normal”? Thanks. I know this likely is a WooCommerce issue – not a GeneratePress issue – but any ideas would be appreciated. My website is catcollar.com and if you add a product to the cart you can see what I’m talking about (on mobile view). Thanks again.

    #1478278
    David
    Staff
    Customer Support

    Hi there,

    try this CSS:

    @media(max-width: 768px) {
        /* remove colon */
        .woocommerce-page table.shop_table_responsive tr td.product-thumbnail::before {
            content: '';
        }
        /* Align thumb right */
        .woocommerce table.cart .product-thumbnail, .woocommerce-page #content table.cart .product-thumbnail, .woocommerce-page table.cart .product-thumbnail {
            text-align: right !important;
        }
        /* Float remove item left */
        .woocommerce-page table.shop_table_responsive tr td.product-remove {
            float: left;
            border: none;
        }
    }
    #1478920
    Jeff

    That worked David. Thank you.

    #1479752
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.