Displaying 1 Product Column on Mobile

Hi @kesterleek , in the “Additional CSS” part of the dashboard add:

@media screen and (max-width: 600px) {
    .woocommerce ul.products li.product {
        float: none;
        width: auto;
    }    
}

Thanks Andrew, really appreciate receiving a response.

Can I confirm – this will leave my desktop-view as 3-columns, but adjust the mobile-view to a 1-column setup?

From what I can see on an iPhone 5 this is working perfectly, but on the larger-screened iPhone 6 Plus it is still showing two columns. Are you able to advise what the max. width would have to be to ensure it shows as a single-column on the iPhone 6 Plus?

Thanks so much!

Kester

This bit of the code:

@media screen and (max-width: 600px) {

Means that it will only be applied to devices smaller than 600px-wide. You can adjust that “600” to the value you wish.

Thanks once more. Understand that and have tried upping to 1000+. On the emulators it is showing as expected (one column) but not on any mobile I am using (still two columns).

If you have one to hand any chance you (or others) could visit the link (https://bettyberry.co.uk/product-category/vintage/) and confirm/show whether you are seeing single or dual columns? Could be a cache issue I suppose.

Thanks

Kester

I can only emulate the device, I cannot confirm whether the issue is fixed on iPhone devices.

OK, thanks – all sorted now!