Hey @mayank29gupta
You can also use this CSS to make the products show in 2 columns on mobile:
@media screen and (max-width: 768px) {
ul.products li.product {
width: 48%;
margin: 0 1% 20px 1%;
float: left;
}
ul.products li.product:nth-of-type(2n+1) {
clear: both;
}
}
Hello @senff thanks for the reply. It worked for search results, categories but not for home page. At first I thought it must be cache issue and therefore waited several days to see if things change but code doesn’t work for home page. I have custom home page, does it caused the issue?
Hey @mayank29gupta
Please share a link to your site so I can take a look at what you mean exactly, and see what CSS code would be needed.
Website name is oldbookdepot(dot)in
Hey @mayank29gupta
In that case, replace the code I gave you earlier with this:
@media screen and (max-width: 768px) {
.home ul.wc-block-grid__products li,
ul.products li.product {
width: 48%;
margin: 0 1% 20px 1%;
float: left;
}
.home ul.wc-block-grid__products li:nth-of-type(2n+1),
ul.products li.product:nth-of-type(2n+1) {
clear: both;
}
}
