Non responsive design in cart

Continuing the discussion from Cart Page Not Responsive:

Hi,

Thank you for raising a new topic.

Can I ask you to share a screenshot that points me the issue appearing on your screen? It will help me better find out the root of the issue and suggest the possible solution.

Regards,
Kharis
aThemes Support

Thank You vey much for Your quick response! See attached, i have a problem with mobile and pc too - coupon field and button make problems, I’m not able to find the solution, another alignements I solved by some css, but nothing works for this… Thank You again. Best regards, Petra.



Page is this one, maybe put something to the cart and see…
I can send you access to my pages, if it will help…

Or send You my css edits…

Thank You very much!

Hi,

Thank you for getting back along width additional information.

If I got it right, you’d add this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 767px) {
      .woocommerce-cart table.cart td.actions .coupon {
        width: 100%;
      }
      .woocommerce-cart table.cart td.actions .coupon input[type="text"], .woocommerce-cart table.cart td.actions .coupon input {
        width: 76%;
      }
    }

Let me know how it woks.

Regards,
Kharis
aThemes Support

Dear Kharis, unfortunately it doesn’t work… It’s not aligned neither on computer nor on mobile… I don’t know what to do. Now the coupon button is not inline on mobile. Thank You, Petra.

Hi,

Thank you for getting back.

Try replacing the last code I suggested with:

    @media only screen and (max-width: 767px) {
      .woocommerce-cart table.cart td.actions .coupon {
        width: 100%;
      }
      .woocommerce-cart table.cart td.actions .coupon input[type="text"], 
      .woocommerce-cart table.cart td.actions .coupon input {
        width: calc(100% - 130px);
        width: -moz-calc(100% - 130px);
        width: -webkit-calc(100% - 130px);
      }  
    }

Let me know how it goes.

Regards,
Kharis
aThemes Support

Dear Kharis, on mobile devices it looks cool! In tablet and PC still not aligned, PC is not big problem, but tablet in width hasn’t coupon field and button already inline…
If You will have some soluttion for this, it would be great…

Thank You very much, Petra.

In phone ok, in tablet not :slight_smile: (I wrote mobile devices, sorry)

Hi,

Thank you for getting back.

Try adding this CSS code:

    @media only screen and (min-width: 992px) and (max-width: 1199px) {
      .woocommerce-cart table.cart td.actions .coupon {
        width: 100%;
      }
      .woocommerce-cart table.cart td.actions .coupon input[type="text"], 
      .woocommerce-cart table.cart td.actions .coupon input {
        width: calc(100% - 130px);
        width: -moz-calc(100% - 130px);
        width: -webkit-calc(100% - 130px);
      }    
    }

Regards,
Kharis
aThemes Support

Dear Kharis, coupon field with button is still not full width in every cases, but it’s inline, so thats good!
Thank You very much, have beautiful days and stay safe! Best regards, Petra.

You’re welcome Petra!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support