[Resolved] woo basket blocks spacing

Home Forums Support [Resolved] woo basket blocks spacing

Home Forums Support woo basket blocks spacing

  • This topic has 5 replies, 2 voices, and was last updated 2 months ago by Ying.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2237028
    Stephen

    Hi, it looks like the woocommerce cart page is made of 3 blocks – Cart, Cross sells and Basket totals.

    Ive used additional CSS (from David) to change the order for mobile phone screen but I’d also like to add vertical space between Cart and Total and Cross sells on mobile phone screen size.

    – Can you let me know how to do this please ?

    Thank you
    Stephen

    /* woo cart move cross sells to below checkout */

    @media
    (max-width: 768px) {
    .woocommerce-cart .cart-collaterals {
    display: flex;
    flex-direction: column-reverse;
    }
    }

    #2237177
    Ying
    Staff
    Customer Support

    Hi Stephen,

    I’m not seeing the cross sell section on your cart page, try this CSS to add spacing below the other two sections:

    .woocommerce-cart .entry-content .woocommerce > *:not(.woocommerce-notices-wrapper) {
        margin-bottom: 100px;
    }
    #2238357
    Stephen

    Hi Ying, thanks for the reply.

    The cross sells section does not always display, it depends on what is in the cart.

    Ive added your CSS and it does add a margin below Cart Section and below Cross Sells section but really I would like a space below the Basket Total section.

    Thanks
    Stephen

    #2238385
    Ying
    Staff
    Customer Support

    The margin applied to the basket totals, check the orange part:
    https://www.screencast.com/t/tYU5apQFu

    Or would you like it to be added this way?
    https://www.screencast.com/t/juvkDWZwM

    If so, try this CSS:

    .cart_totals {
        margin-bottom: 100px;
    }

    and change the previous CSS to:

    .woocommerce-cart .entry-content .woocommerce > *:not(.woocommerce-notices-wrapper,.cart-collaterals) {
        margin-bottom: 100px;
    }
    #2245568
    Stephen

    thats great thanks

    in the end the CSS below arranged things nicely


    @media
    (max-width: 768px) {
    .woocommerce-cart .cart-collaterals {
    display: flex;
    flex-direction: column-reverse;
    }
    .cart_totals {
    margin-bottom: 50px;
    }
    }

    #2246335
    Ying
    Staff
    Customer Support

    You are welcome 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.