2 column product view on mobile

Hello @lukewilson6,

It is possible to have a 2 column view and it would require adding CSS rules for mobile device screen sizes.

Please follow the instructions below:
1. Log in to the admin area and go to “Appearance >> Customize >> Additional CSS”
2. Paste the below code in “Additional CSS” and save it.
@media (max-width: 479px) and (min-width:420px){
.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%;
margin: 0 0 2.992em;
}
li.product .product-info-wrap{
padding:20px 15px 25px 15px;
}
}
This will display the listing in 2 columns for mobile screens.

Note: Any device size smaller than 420px would have 1 column. We do not recommend 2 columns for these screens as the fonts and presentation become too small to be effective.

[ Signature deleted ]

• This reply was modified 5 years, 9 months ago by Jan Dembowski.

Thanks so much for your quick response!

I have added the code, but I still only have one product column when viewing from my Google Pixel 2. However if i turn my phone sideways, then the 2 columns appear! Is this something to do with my phone settings or…?

Thanks again!

Luke

I have also tested with an iPhone 8 and there is still only 1 column after adding the code ??

I’m having this same issue on my website. Before implementing the code mentioned above, iPhone 6 Plus gives 2 columns when tilted to landscape mode but a single column in portrait mode. Any help to get 2 columns in portrait mode will be highly appreciated.