[Resolved] woocommerce cart layout using 2 columns – Problems with messages

Home Forums Support [Resolved] woocommerce cart layout using 2 columns – Problems with messages

Home Forums Support woocommerce cart layout using 2 columns – Problems with messages

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1528965
    Raul

    Hello,

    Following the instructions on this previous topic, https://generatepress.com/forums/topic/alternative-woocommerce-cart-layout/#post-1528904, I am trying to have the cart layout divided in 2 columns.

    My problem is that all messages: .woocommerce-info, .woocommerce-message, etc, are affecting the main table of products in the cart.

    How it looks:
    https://www.dropbox.com/s/1pcyyv7z0ry4of1/Screen%20Shot%202020-11-12%20at%203.25.58%20PM.png?dl=0

    How it should look:
    https://www.dropbox.com/s/saepstwgjhi4wkm/Screen%20Shot%202020-11-12%20at%203.26.05%20PM.png?dl=0

    Can you figure out a solution for this?

    Thanks,

    #1529169
    Elvin
    Staff
    Customer Support

    Hi,

    The “How it should look:” image you’ve provided doesn’t seem to be loading properly.

    Can reupload and provide a working link so we could arrange the proper CSS code to address the issue?

    Thank you. 😀

    #1529218
    Raul

    Sorry about that, I updated the previous post

    #1529637
    David
    Staff
    Customer Support

    Hi there,

    try this CSS instead:

    @media(min-width: 1024px) {
        .woocommerce-cart .woocommerce {
            display: flex;
            flex-wrap: wrap;
        }
        .woocommerce-cart .woocommerce .woocommerce-notices-wrapper {
            flex: 1 0 100%;
        }
        .woocommerce-cart .woocommerce .woocommerce-cart-form {
            flex: 1 1;
        }
        .woocommerce-cart .woocommerce .cart_totals {
            flex: 1;
        }
    }
    #1530448
    Raul

    Thanks David,

    I had to tweak a little the parameters but your response helped me a lot!

    @media(min-width: 1024px) {
        .woocommerce-cart .woocommerce {
            display: flex;
            flex-wrap: wrap;
        }
        .woocommerce-cart .woocommerce .woocommerce-notices-wrapper {
            flex: 1 0 100%;
        }
        .woocommerce-cart .woocommerce .woocommerce-cart-form {
            flex: 1 0 66%;
        }
        
        .woocommerce-cart .woocommerce .cart-collaterals {
            flex: 1 0 30% ;
        }
        
        
    }

    Thanks so much,
    Raul

    #1530870
    David
    Staff
    Customer Support

    Glad to hear that!

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