I apologize if this has been covered before, but I'd like to change the number of columns in the product grid to 2 instead of 1 when viewing on a smaller screen.
It should be the layout as the "related products" section on the single product view.
changing product view on smaller screens from 1 to 2 columns
8 posts from 3 voices- Started 7 months ago by fitzpatrick512
- Latest reply from Dude
- This topic is closed
- This topic is not a support question
-
fitzpatrick512
MemberYes that's why I was using the Related Products section as an example of how we'd like it to look.
We want the products in the store view to also appear in two columns.
I understand that this is done using Media Queries, but I was hoping for more specific instruction since I'm new to the concept.
Posted 7 months ago # -
fitzpatrick512
MemberSo in woocommerce-mod.css after:
@media only screen and (max-width: 767px) {
I deleted:
#top .products .product {
margin: 0 0 20px 0;
width: 100%;
}And added:
#top .products .product {
margin: 0 4% 20px 0;
width: 48%;
}#top .products .product:nth-child(even) {
margin: 0 !important;
}#top .products .product:nth-child(odd) {
margin: 0 4% 0 0 !important;
}Not quote there yet though, and can't find what I'm missing. Little help?
Posted 7 months ago #
Topic Closed
This topic has been closed to new replies.
Create a new thread and tell me what problems you are encountering and what you want to know. 
There is no step 3 :) 
