Cart Page Not Responsive

I can’t seem to make the Cart page responsive. Once you add a product to the cart and visit the cart page, it over-runs to the right on mobile devices with no way to scroll over on a mobile device. You also can’t see the Apply Coupon button because it is out of visible range due to this. I have been trying to inspect the element but can’t find what to change to make this page responsive. Awesome theme! Love it!

Thanks in advance! - JT

Hello,

Please try to add css code below from Appearance > Customize > Additional CSS field:

@media (max-width: 767px) {
    .woocommerce-cart th.product-remove {
        display: none;
    }

    .woocommerce-cart table.cart .woocommerce-cart-form__cart-item td.product-subtotal {
        display: table-cell;
    }

    .woocommerce-cart .woocommerce-cart-form__contents thead th {
        padding: 0 0 20px;
    }

    .woocommerce-cart table.cart td {
        padding: 20px 0 10px 5px;
    }

    .cart .quantity {
        width: auto;
    }

    .woocommerce-cart table.cart td.actions .coupon input[type=text],
    .woocommerce-cart table.cart td.actions .coupon input {
        width: 50%;
    }
}

@media (max-width: 560px) {
    .woocommerce-cart table.cart td.actions .coupon {
        width: 100%;
        margin-bottom: 20px;
    }
}

and result should look like this https://www.screencast.com/t/sWgEOY8MHO

Best Regards!

1 Like

You rock! This worked perfectly. Thanks so much!

I am having the same issues with the mobile cart not being responsive. Tried using the css provided by @dimikjones with some luck… Any ideas on how to get it all aligned a little better?

Thanks in advance!

Hello there,

Please try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 767px) {
    	 .page.woocommerce-cart .site-content > .container > .row {
    		 margin-left: 0;
    		 margin-right: 0;
    	}
    }

If this still doesn’t help, please provide us a design to show how it should look on mobile screen.

Regards,
Kharis
aThemes Support