Products per row

How do i change the amount of products per row. 
I want to show 4 products on desktop and 1 on tablet/mobile. 



I have already tried this custom css

.woocommerce ul.products li.product { 
width: 21% !important;
margin: 2% !important;
clear: none !important;
}
.woocommerce ul.products li.product:nth-child(4n+1) {
clear: both !important;
}

@media screen and (min-width: 768px) and (max-width: 980px) {
.woocommerce ul.products li.product.first, .woocommerce ul.products li.product.last {
clear: right !important;
}
.woocommerce ul.products li.product:nth-child(4n+1) {
clear: none !important;
}
}

It works fine on desktop, but messy op my mobile and tablet version.

Thanks you very much :)

Comments

Sign In or Register to comment.