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


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

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.

aThemes Support