Improper appearance of mobile Woocommerce cart page

[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.

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jeff]

That worked David. Thank you.

[David]

Glad to be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts