Archived topic

woocommerce cart layout using 2 columns - Problems with messages

5 replies · Started by Raul on November 12, 2020

Viewing posts 1–6 of 6

November 12, 2020 at 1:36 pm #1528965

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,

November 12, 2020 at 7:20 pm #1529169

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. :D

November 12, 2020 at 8:25 pm #1529218

Sorry about that, I updated the previous post

November 13, 2020 at 5:15 am #1529637

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;
    }
}

November 13, 2020 at 3:59 pm #1530448

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

November 14, 2020 at 5:00 am #1530870

Glad to hear that!

This archived topic is closed to new replies.

Start building better websites today.