Make Mobile Site 2 Column

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;
  }
}