Title: Make Mobile Site 2 Column
Last modified: September 17, 2020

---

# Make Mobile Site 2 Column

 *  [mayank29gupta](https://wordpress.org/support/users/mayank29gupta/)
 * (@mayank29gupta)
 * [5 years, 7 months ago](https://wordpress.org/support/topic/make-mobile-site-2-column/)
 * i using storefront theme. In mobile site it is only show one column one product
   in home page but I wanted to show 2 columns. How to show 2 product per column
   in mobile site?

Viewing 5 replies - 1 through 5 (of 5 total)

 *  [Senff – a11n](https://wordpress.org/support/users/senff/)
 * (@senff)
 * [5 years, 7 months ago](https://wordpress.org/support/topic/make-mobile-site-2-column/#post-13418638)
 * Hey [@mayank29gupta](https://wordpress.org/support/users/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;
         }
       }
       ```
   
 *  Thread Starter [mayank29gupta](https://wordpress.org/support/users/mayank29gupta/)
 * (@mayank29gupta)
 * [5 years, 6 months ago](https://wordpress.org/support/topic/make-mobile-site-2-column/#post-13531436)
 * Hello [@senff](https://wordpress.org/support/users/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?
 *  [Senff – a11n](https://wordpress.org/support/users/senff/)
 * (@senff)
 * [5 years, 6 months ago](https://wordpress.org/support/topic/make-mobile-site-2-column/#post-13557156)
 * Hey [@mayank29gupta](https://wordpress.org/support/users/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.
 *  Thread Starter [mayank29gupta](https://wordpress.org/support/users/mayank29gupta/)
 * (@mayank29gupta)
 * [5 years, 6 months ago](https://wordpress.org/support/topic/make-mobile-site-2-column/#post-13557961)
 * Website name is oldbookdepot(dot)in
 *  [Senff – a11n](https://wordpress.org/support/users/senff/)
 * (@senff)
 * [5 years, 6 months ago](https://wordpress.org/support/topic/make-mobile-site-2-column/#post-13562863)
 * Hey [@mayank29gupta](https://wordpress.org/support/users/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;
         }
       }
       ```
   

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Make Mobile Site 2 Column’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/storefront/4.6.2/screenshot.png)
 * Storefront
 * [Support Threads](https://wordpress.org/support/theme/storefront/)
 * [Active Topics](https://wordpress.org/support/theme/storefront/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/storefront/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/storefront/reviews/)

 * 5 replies
 * 3 participants
 * Last reply from: [Senff – a11n](https://wordpress.org/support/users/senff/)
 * Last activity: [5 years, 6 months ago](https://wordpress.org/support/topic/make-mobile-site-2-column/#post-13562863)
 * Status: not resolved