Digital experiences for all disciplines
New Landing › How can we help? › Themeforest Theme Support › Neighborhood › Number of Products in Responsive Mode
New Landing › How can we help? › Themeforest Theme Support › Neighborhood › Number of Products in Responsive Mode
- This topic has 15 replies, 3 voices, and was last updated 9 years by Kyle – SUPPORT.
-
Posted in: Neighborhood
-
October 9, 2014 at 1:15 am #118701
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 #118757Hi
Please can you provide me with your link
– Kyle
October 9, 2014 at 9:13 am #118767October 9, 2014 at 9:41 am #118796Add 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 #119057It didn’t work for me…
October 9, 2014 at 11:51 pm #119061Hi,
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 #119372Hi 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 #119525Apologies, 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 #120237Thank you, it works now ๐
October 15, 2014 at 8:14 am #120300No problem ๐
– Kyle
October 18, 2014 at 10:57 pm #121251Hi 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 rowAttachments:
You must be logged in to view attached files.October 20, 2014 at 10:18 am #121450When you remove the CSS does it fix the issue?
– Kyle
October 24, 2014 at 10:13 pm #123075no it didn’t make a difference.
October 27, 2014 at 8:16 am #123225Then 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 #123521Hi 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! ๐
-
Posted in: Neighborhood
You must be logged in and have valid license to reply to this topic.