Cart page width Woocommerce to small

Obviousmedia · March 2023

Hi,

When I look at the cart page the width of the page is to small so some text is out the screen (iPhone 13). Maybe the text size of the product name is the problem. See attachment for a example.

How can I fix this?

thanks

Obviousmedia · March 2023

The webadres is https://bwi-trading.nl

Its the checkout page not the cart page, see https://bwi-trading.nl/checkout/ on mobile

Phil · March 2023

Hi,

Your product names are too long and break the checkout layout.

Please, try the following CSS code:

.woocommerce-checkout .product-name{
   word-break: break-word;
}

Put it in Betheme -> Theme options -> Custom CSS & JS -> CSS.

Thanks

Obviousmedia · March 2023

Thanks that helped!

Can you also give me the css code to make the Cart and Checkout pages wider? There is now a lot of white space .

Phil · March 2023

Please use this code:

@media only screen and (max-width: 767px){
   .woocommerce-checkout .content_wrapper .section_wrapper,
   .woocommerce-cart .content_wrapper .section_wrapper{
      padding-left: 0!important;
      padding-right: 0!important;
   }
}

Thanks

Obviousmedia · March 2023

Thanks!

Cart page width Woocommerce to small

Comments