WooCommerce products alternating between 1 and 2 in row

Support
#1

Hi there,
I was working on getting my products to display right in this thread - https://theme.co/apex/forum/t/woocommerce-products-aligned-left-how-to-center/47776/5, and the last piece of code worked to align the products to center, but after I added that code now products on tablets are showing 2 in a row, then 1 in a row, then 2, then 1 and it doesn’t look good at all.

How can I fix that and get there to be two in each row on tablets, and make sure each row is full ( 3 on desktop, 1 on mobile)?

page - https://taylorandtessier.com/iconic-shred-bracelet-collection/

Thanks for the help!

#2

Hi,

To fix it, you can add this in Theme Options > CSS

@media (max-width: 979px) {
.woocommerce .cols-3 li.product, 
.woocommerce .cols-4 li.product,
.woocommerce.columns-3 li.product, 
.woocommerce.columns-4 li.product {
    width: 47.7%;
}
}

Hope that helps

#3

Ok great, that worked. Thanks!

Any idea why it isn’t working properly in the first place? I’m stoked you helped me fix it but I don’t like having to add css to fix things that seem like they should be working out of the box.

Thanks again!

#4

Hi,

It’s because you have adjusted the margin in between products, you have set it to auto.

By default, it is set to 4% which is the correct number to make the products centered horizontally.

Since the margin was changed you need to adjust the width and alignment as well thus the added css code

In case you want to learn css, I am providing some resources that could help



Hope that helps

#5

Ok, thanks for the tip. I see that code and I have removed it, but everything still seems to be aligned left, with a bigger margin on the right. What else could be causing this?

I do see some code coming from the renew.css:1044 that looks like it is giving it a negative 9.25% margin on the right. Is that the culprit?

.woocommerce ul.products {
clear: both;
margin: 0 0 -9.25%;
list-style: none;

#6

You still have this custom code which breaks the layout.

.woocommerce li.product {
    margin: 10px 10px 10px 10px;
}

Please remove it.

Hope that helps.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.