Help needed with cart alignment

Hi Support,

This problem is regarding the previous thread which is already resolved. I am having some problem with ipad screen which is 768px width. As seen in the screen show in private content, we can see that the variation details are not aligned properly. Will you please check and help on this?

This problem can be reproduced by adding the test product [private area] into cart and then visiting the cart and pressing the change button on 768px screen.

Thanks.

/1/
https://xtemos.com/forums/topic/woocommerce-update-variations-in-cart-not-responsive-on-mobile/

The problem appears with screen 1024px and not 768px.

Hello,

You need to take the code provided in the topic you refer to and add to the Theme Settings > Custom CSS > Tablet.

Best Regards

Hi Elise,

Given below CSS is already in the Custom CSS under tablet section. It didn’t help.

.woocommerce-cart-form__contents tr:not(.woocommerce-cart-form__cart-item) {
  padding-left: 0;
}
.woocommerce-cart-form__contents tr:not(.woocommerce-cart-form__cart-item) tr {
  border-bottom: none;
  min-height: auto;
}
.woocommerce-cart-form__contents tr:not(.woocommerce-cart-form__cart-item) td {
  display: table;
  width: 100% !important;
  text-align: left;
}
.woocommerce-cart-form__contents tr:not(.woocommerce-cart-form__cart-item) td td.label {
  border-bottom: 0;
}
.woocommerce-cart-form__contents tr:not(.woocommerce-cart-form__cart-item) td .variations {
  width: 100%;
  margin-bottom: 0;
}
.quick-view.wd-action-btn.wd-quick-view-btn.wd-style-icon {
display: block;
}

Hello,

Please provide the site admin access to the private area.

Best Regards

Please check below.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

@media (max-width: 768px) {
  .woocommerce-cart-form__contents tr:not(.woocommerce-cart-form__cart-item) {
  padding-left: 0;
}
.woocommerce-cart-form__contents tr:not(.woocommerce-cart-form__cart-item) tr {
  border-bottom: none;
  min-height: auto;
}
.woocommerce-cart-form__contents tr:not(.woocommerce-cart-form__cart-item) td {
  display: table;
  width: 100% !important;
  text-align: left;
}
.woocommerce-cart-form__contents tr:not(.woocommerce-cart-form__cart-item) td td.label {
  border-bottom: 0;
}
.woocommerce-cart-form__contents tr:not(.woocommerce-cart-form__cart-item) td .variations {
  width: 100%;
  margin-bottom: 0;
}
.quick-view.wd-action-btn.wd-quick-view-btn.wd-style-icon {
display: block;
}
}

Best Regards

Hi Elise,

Its still the same after I applied to CSS to Theme Settings > Custom CSS > Global.

Attachments:

You must be logged in to view attached files.

Hello,

Sorry for the confusion. Please remove the code from Tablet/Landscape and Mobile.

Best Regards

Hi Elise,

Thanks for your help. I have removed the previous code and now it looks good.

Thanks.

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts