WooCommerce 2 Column on Mobile

[blackicetrading]

Hi,
I previously added CSS code to make our 2 shops display as 2 columns on mobile. That was working fine but at some point (no idea when) it has stopped working.
I’ve searched and found https://theme.co/apex/forum/t/woocommerce-2-column-product-listings-on-mobile/9282/16
Which is the same/similar CSS that previously added. I also read the response about Product Filter. While we dont run Product Filter we do run Product Search, but only on one site so I dont think this applies.
If I inspect the html code, I can see <a> links between each <li>, if I delete these in chrome inspector then the products display as intended.
Using grep to find the class on the <a> link, only returns “wp-content/plugins/woocommerce/includes/wc-template-functions.php” so I would guess it’s not a plugin that’s doing this.

Any idea what I’m doing wrong or how I can get the 2 columns to work on both sites again? Happy to provide both site URLs in private.

Thanks,

[lely]

Hi @blackicetrading,

Please also try adding this:

@media screen and (max-width: 480px){
.archive.woocommerce .cols-2 li.product:nth-of-type(even),
.archive.woocommerce .cols-3 li.product:nth-of-type(even),
.archive.woocommerce .cols-4 li.product:nth-of-type(even),
.archive.woocommerce.columns-2 li.product:nth-of-type(even),
.archive.woocommerce.columns-3 li.product:nth-of-type(even),
.archive.woocommerce.columns-4 li.product:nth-of-type(even)  {
    clear: none;
    margin-right: 0;
} 
}

We need to reset margin on the even element to zero because it overflows on the container.

Hope this helps.

[blackicetrading]

Yep that’s fixed it thanks.

[christian]

You’re welcome.