Two Catalog columns in mobile view?

For an official ‘theme’ for WooCommerce, the layout on mobile devices is terribly clunky. The header takes up almost the full screen on an iPhone, and then instead of arranging the product catalog into multiple rows on the home page, they are displayed in one oversized column, each product picture taking up almost the entire screen.

Is there no way to rearrange this? That’s a lot of scrolling on a mobile device before any real page content is displayed. It doesn’t seem like WooThemes even offers a paid module to do this, and this is a major handicap for a modern responsive theme. Looks great on desktops, but it’s totally non-professional on any iPhone or mobile device.

Anybody have any idea how to fix the home page product display sizing on a mobile device?

Hey,

For the majority of WooCommerce stores we find that a single column generally works better on mobile devices as stores are so image-driven these days. Scrolling is a very natural behaviour for mobile users.

That said you can quite easily change this with some custom CSS. Off the top of my head, you could try something like this:

@media screen and (max-width: 768px) {
ul.products li.product {
width: 48%;
float: left;
clear: both;
}

ul.products li.product:nth-child(2n) {
float: right;
clear: none;
}
}

Thanks

This did nothing for me, no changes. Any ideas why?

Share a URL and we can check it out ??

Thanks James!
https://www.thewoodenworld.com

The desktop site is fine, but I would love to have 2 columns in the shop on the mobile site.

That code I gave you isn’t being loaded. Try adding it via a custom CSS plugin. Jetpack has a module built in for this, if you’re already using it.

I deleted the code (it was in my child css) as it was not doing anything. I’m not using Jetpack (prefer to do things the old fashioned manual way and have read some bad things about jetpack and compatibility).
If you like I can add the code back in? But it really does nothing. All other child css stuff i’ve added works fine so no issues on that side.

Yeah please add it back then I can see why it’s not working.

OK I’ve added the code you pasted above back in:-

@media screen and (max-width: 768px) {
ul.products li.product {
width: 48%;
float: left;
clear: both;
}

ul.products li.product:nth-child(2n) {
float: right;
clear: none;
}
}

Seems to be working for me; https://cloudup.com/cKqmqZe6HLC

Strange. I have a Nexus 4 (1280L x 768W pixels) and have also tried on Galaxy 3 (1280L x 720W), still 1 column. Also when I resize the desktop site to 768 or less it’s still 1 column. What’s going on here?

Good question. Perhaps you’re seeing a cached version of the CSS although that seems unlikely.

Any other devices you can use to test?

Hi, I’m building a new woocommerce website by using divi theme.

May I know how can I change the mobile view catalog to two columns and the steps to input the CSS.

Thank you.

@darranzann please post in Divi support.

Hi
I want to show 2 products per row in mobile view but it is showing only one product.
How can i show two products in mobile view.
I am currently using NewsPaper theme.Link to site is below.
Website