Two instead of four article-items in a row

[brebber]

Hi,
I like to have two instead of four article-items in a row at shopping card site.
You will see what I mean in the attached two pic.

warenkorb.png = this is how it looks at present
warenkorb_mockup.png = this is how it sould look like

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

Unfortunately there is no 2 column option for the shop in dante, sorry

– Kyle

[brebber]

Hi Kyle,

but there are two colums!?
I didn´t understand what you mean.

[Kyle – SUPPORT]

Sorry I misunderstood.

I see what you mean, thanks for pointing this out, I will forward to the developer to check for you

– Kyle

[brebber]

Hi Kyle,
are there any news about this?

Thanks

[Swift Ideas – Ed]

Hi there,

Thanks for pointing that out, fixed for next update. Add this custom css:

@media only screen and (min-width: 1200px) {
.woocommerce-cart .cart-collaterals .cross-sells ul.products li.product.first {
		margin-left: 30px;
	}
}
.woocommerce-cart .cart-collaterals .cross-sells ul.products li.product:first-child, .woocommerce-cart .cart-collaterals .cross-sells ul.products li.product:nth-child(4n) {
	margin-left: 0!important;
}
.woocommerce-cart .cart-collaterals .cross-sells ul.products li.product.first {
	margin-left: 20px;
	clear: none;
}

– Ed

[brebber]

Hi Ed,

thanks. Now there are 4 items in a row but the margin size is not really right at all.

You can see it in the attached pic.

Attachments:

You must be logged in to view attached files.

[Swift Ideas – Ed]

Hi there,

Change that code to this –

@media only screen and (min-width: 1200px) {
.woocommerce-cart .cart-collaterals .cross-sells ul.products li.product.first {
        margin-left: 30px!important;
    }
}
.woocommerce-cart .cart-collaterals .cross-sells ul.products li.product:first-child, .woocommerce-cart .cart-collaterals .cross-sells ul.products li.product:nth-child(4n + 1) {
    margin-left: 0!important;
}
.woocommerce-cart .cart-collaterals .cross-sells ul.products li.product.first {
    margin-left: 20px!important;
    clear: none;
}

– Ed

[brebber]

Hi Ed,
thank for your answer. It´s not working really good because the 4th article jumps in the second row if the I changes the screensize wider. You can see it in the attached video.

Attachments:

You must be logged in to view attached files.

[Swift Ideas – Ed]

Hi there,

Apologies for that, adjust to this code:

.woocommerce-cart .cart-collaterals .cross-sells ul.products li.product.first {
    margin-left: 20px!important;
    clear: none;
}
.woocommerce-cart .cart-collaterals .cross-sells ul.products li.product:first-child, .woocommerce-cart .cart-collaterals .cross-sells ul.products li.product:nth-child(4n + 1) {
    margin-left: 0!important;
}
@media only screen and (min-width: 1200px) {
.woocommerce-cart .cart-collaterals .cross-sells ul.products li.product.first {
        margin-left: 30px!important;
    }
}
@media only screen and (max-width: 991px) {
.woocommerce-cart .cart-collaterals .cross-sells ul.products li.product {
width: 165px;
}
}
@media only screen and (max-width: 767px) {
.woocommerce-cart .cart-collaterals .cross-sells ul.products li.product.first {
    margin-left: 0!important;
}
}

– Ed

[brebber]

Hi Ed,

it is the same problem as before. It seems that your code isn´t working.

brebber

[Swift Ideas – Ed]

Hi brebber

Can you add the code to the custom css box, rather than where you’ve added it – so that I can test and adjust?

– Ed

[brebber]

Hi Ed,

I´ve done that.
Youl´ll find the code at the top of the coustom css area.

Youn can put the espresso High Voltage at the shopping card to see the effect.

[Swift Ideas – Ed]

Check now, all should be sorted.

– Ed

[brebber]

Hi Ed,

nice! Thank you!