Site logo

Archived topic

2 products wide on mobile

5 replies · Started by Glenn on October 10, 2016

Viewing posts 1–6 of 6

Hello. Wondering if there was a code anyone recommends putting in there to make sure there is a minimum 2 wooproducts wide on mobile pages

put this into simple css with no luck:

@media (max-width: 768px) {
ul.products li.product {
width: 48%;
float: left;
clear: both;
}

ul.products li.product:nth-child(2n) {
clear: none;
float: right;
}
}

Hi there,

Give this a shot:

@media (max-width: 768px) {
    .woocommerce ul.products li.product, 
    .woocommerce-page ul.products li.product, 
    .woocommerce-page[class*=columns-] ul.products li.product, 
    .woocommerce[class*=columns-] ul.products li.product {
        width: 48%;
        float: left;
    }
}

tried but it didn't do anything. not sure if something got messed up when I put the previous code into the simple css panel in the customize area. I put it in and then it disappeared but still effected my site while using other themes. Neither of the two css inputs in this thread have made the 2 products wide in mobile in generate press

So when you added that CSS to Simple CSS, it disappeared when you saved?

yes

This archived topic is closed to new replies.