Archived topic
2 products wide on mobile
5 replies · Started by Glenn on October 10, 2016
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
Can you try #1 on this page to check for other plugin issues?: https://generatepress.com/knowledgebase/debugging/