Number of Products in Responsive Mode

[artselemental]

Hi,

I currently have responsive mode switched on and it’s displaying two products per row on the iPhone. How do I change it that it only displays one product per row? Thanks

[Kyle – SUPPORT]

Hi

Please can you provide me with your link

– Kyle

[artselemental]

http://shop.artselemental.com

[Kyle – SUPPORT]

Add this to your custom css:

@media only screen and (min-width: 1200px) { 
body .woocommerce-shop-page ul.products li.product, body .product_list_widget > div > ul.products li.product {
  width: 100% !important;
}
}

– Kyle

[artselemental]

It didn’t work for me…

[Rui Guerreiro – SUPPORT]

Hi,

It seems to be ok in an Android Device. Can you clear the mobile browser cache and try again?
https://www.dropbox.com/s/cyrr329vgs4gne9/2014-10-09%2023.50.13.png?dl=0

-Rui

[artselemental]

Hi tried to do that but still didn’t work. The homepage is fine, its when you explore the product categories page that it displays two products rather than one.

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Apologies, the CSS should be this:

@media only screen and (max-width: 767px) { 
body .woocommerce-shop-page ul.products li.product, body .product_list_widget > div > ul.products li.product {
  width: 100% !important;
}
}

– Kyle

[artselemental]

Thank you, it works now 🙂

[Kyle – SUPPORT]

No problem 🙂

– Kyle

[artselemental]

Hi there again, responsive mode is working not a problem. However, I think the CSS code has messed up my woo commerce short code pages like “New Arrivals” & “Sales” as attached in my screenshot. Please advice?

First Screenshot is how it looks now – broken.
Second Screenshot is how I want it to look – 3 in a row

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

When you remove the CSS does it fix the issue?

– Kyle

[artselemental]

no it didn’t make a difference.

[Kyle – SUPPORT]

Then the issue was not caused by the CSS.

Add this, it should fix it:

@media only screen and (max-width: 767px) { 
.woocommerce.columns-3 ul.products li.product {
width: 30.6%;
}
}

– Kyle

[artselemental]

Hi thanks but the CSS did not fix it. I suppose I should create a new topic because I meant that it wasn’t working in normal mode. However I have temporarily deleted the “column=3” array in the “sale” and “new arrivals” woo commerce shortcode and it works fine. The only issue now is this:

1) Normal Mode: it displays in 4 columns, but I want only 3 columns, how do I fix this?

2) Responsive Mode: it displays in 2 columns, but I want 1 column only

Please note that I am only talking about the pages that have the woo commerce shortcodes, the other pages worked just fine with the first lot of css you provided me (1 column in responsive mode). I hope that made sense! 🙂