Site logo

Archived topic

Custom CSS

20 replies · Started by Renaldo on June 27, 2019

Viewing posts 16–21 of 21

Try this:

@media (max-width: 768px) {
    .woocommerce table.shop_table.woocommerce-cart-form__contents td:before {
        content: '';
    }

    .woocommerce table.shop_table_responsive tr.woocommerce-cart-form__cart-item {
        display: grid !important;
        grid-template-columns: 50% 50%;
        padding: 20px 10px;
        border: 0.5px solid
    }

    .woocommerce table.shop_table_responsive tr.woocommerce-cart-form__cart-item>* {
        grid-column: 2;
        padding: 5px;
        border: 0;
        text-align: left !important;
        background-color: rgba(0,0,0,0) !important;
    }

    .woocommerce table.cart .product-thumbnail,
    .woocommerce-page #content table.cart .product-thumbnail,
    .woocommerce-page table.cart .product-thumbnail {
        display: block;
        padding: 0 20px 0 0;
        grid-column: 1;
        grid-row: 2 / 10;
    }

    .woocommerce table.shop_table_responsive tr.woocommerce-cart-form__cart-item .product-remove {
        grid-column: 1;
        grid-row: 1
    }

    .woocommerce-cart table.cart img {
        width: 300px;
    }
    .woocommerce table.shop_table.woocommerce-cart-form__contents td div.quantity {
        justify-content: flex-start !important;
    }
}

Hey there

That works well, just needs a small tweak here and there please see screenshots.https://postimg.cc/gallery/g1rxnr50/

I think it just needs to be boxed and displayed more like a preview. As all the data is spread out and not really in place or boxed. But that is really close.

Thanks for your help guys! I do appreciate it.

Glad to be of help

This archived topic is closed to new replies.