WooCommerce cart/product not appearng properly on mobiles – Bakery Theme Pro

[Stuart Farrimond]

Hi there,
When viewed on a mobile device, the table with additional information/reviews beneath a product looks very squashed – the left column is so small that the letters are stacked on one another – see http://postimg.org/image/dbmm3uh85/
On the checkout page, the buttons do not show properly: the ‘proceed to checkout’ button is pushed beyond the left of the screen and the ‘apply coupon’ button is too small for the text – see http://postimg.org/image/b6x5o03tp/ Furthermore, the shopping cart page is so wide that it stretches beyond the width of the header (and footer), see – http://postimg.org/image/60swfie3f/
website: youngblooms.co.uk
(Go to online shop to see products)
Thanks!

[Sonnal S Sinha]

Hi Stuart,

Kindly go to Appearance>Theme Options>Basic Settings>Custom CSS box:
Paste this CSS code in custom css box

@media screen and (max-width:47.938em) and (min-width:30.000em) {
.woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals { width:auto;}
.woocommerce table.shop_table td, .woocommerce-page table.shop_table td { padding:25px 2px;}
.woocommerce #content .quantity, .woocommerce .quantity, .woocommerce-page #content .quantity, .woocommerce-page .quantity { width:10%;}
.woocommerce table.cart input, .woocommerce-page #content table.cart input, .woocommerce-page table.cart input { padding:9px 2px 10px;}
.woocommerce .coupon { width:70%;}
.woocommerce #content table.cart td.actions .coupon, .woocommerce table.cart td.actions .coupon, .woocommerce-page #content table.cart td.actions .coupon, .woocommerce-page table.cart td.actions .coupon { float:left !important;}
}

Regards,
Shri

[Stuart Farrimond]

Done that, but remains the same,
Stu

[Sonnal S Sinha]

Okay kindly replace this code with previous CSS code

@media screen and (max-width:47.938em) and (min-width:30.000em) {
.woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals { width:auto !important;}
.woocommerce table.shop_table td, .woocommerce-page table.shop_table td { padding:25px 2px !important;}
.woocommerce #content .quantity, .woocommerce .quantity, .woocommerce-page #content .quantity, .woocommerce-page .quantity { width:10% !important;}
.woocommerce table.cart input, .woocommerce-page #content table.cart input, .woocommerce-page table.cart input { padding:9px 2px 10px !important;}
.woocommerce .coupon { width:70% !important;}
.woocommerce #content table.cart td.actions .coupon, .woocommerce table.cart td.actions .coupon, .woocommerce-page #content table.cart td.actions .coupon, .woocommerce-page table.cart td.actions .coupon { float:left !important;}
}

Regards,
Shri

[Stuart Farrimond]

Done – still the same.

[Author]

Posts