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

Home Forums All Other Themes WooCommerce cart/product not appearng properly on mobiles – Bakery Theme Pro

This topic contains 4 replies, has 2 voices, and was last updated by  Stuart Farrimond 2 years, 6 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #17182

    Stuart Farrimond
    Member
    • Topics: 13
    • Replies: 21
    • Total: 34
    Member since: November 9, 2015

    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!

    #17197

    Forum Moderator
    Member
    • Topics: 0
    • Replies: 17172
    • Total: 17172
    Member since: August 16, 2013

    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

    #17209

    Stuart Farrimond
    Member
    • Topics: 13
    • Replies: 21
    • Total: 34
    Member since: November 9, 2015

    Done that, but remains the same,
    Stu

    #17213

    Forum Moderator
    Member
    • Topics: 0
    • Replies: 17172
    • Total: 17172
    Member since: August 16, 2013

    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

    #17290

    Stuart Farrimond
    Member
    • Topics: 13
    • Replies: 21
    • Total: 34
    Member since: November 9, 2015

    Done – still the same.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.