Number of Products in Responsive Mode

swiftideas

ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

This topic has 15 replies, 3 voices, and was last updated 9 years by Kyle – SUPPORT.

Viewing 15 posts - 1 through 15 (of 16 total)

1 2 →

Back to forum

Posted in: Neighborhood
October 9, 2014 at 1:15 am #118701

artselemental
Member

Post count: 23

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

October 9, 2014 at 8:56 am #118757

Kyle – SUPPORT
Moderator

Post count: 35880

Hi

Please can you provide me with your link

– Kyle

October 9, 2014 at 9:13 am #118767

artselemental
Member

Post count: 23

http://shop.artselemental.com

October 9, 2014 at 9:41 am #118796
Kyle – SUPPORT
Moderator

Post count: 35880
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
October 9, 2014 at 11:15 pm #119057

artselemental
Member

Post count: 23

It didn’t work for me…

October 9, 2014 at 11:51 pm #119061

Rui Guerreiro – SUPPORT
Keymaster

Post count: 25779

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

October 10, 2014 at 10:05 pm #119372

artselemental
Member

Post count: 23

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.

October 13, 2014 at 7:15 am #119525
Kyle – SUPPORT
Moderator

Post count: 35880
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
October 15, 2014 at 1:03 am #120237

artselemental
Member

Post count: 23

Thank you, it works now 🙂

October 15, 2014 at 8:14 am #120300

Kyle – SUPPORT
Moderator

Post count: 35880

No problem 🙂

– Kyle

October 18, 2014 at 10:57 pm #121251

artselemental
Member

Post count: 23

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.

October 20, 2014 at 10:18 am #121450

Kyle – SUPPORT
Moderator

Post count: 35880

When you remove the CSS does it fix the issue?

– Kyle

October 24, 2014 at 10:13 pm #123075

artselemental
Member

Post count: 23

no it didn’t make a difference.

October 27, 2014 at 8:16 am #123225
Kyle – SUPPORT
Moderator

Post count: 35880
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
October 27, 2014 at 8:36 pm #123521

artselemental
Member

Post count: 23

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! 🙂
Back to forum

Posted in: Neighborhood