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.
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.
Hi,
The related products are already shown in 2 columns when viewing on iphone or any other mobile devices with less than 468px screen width. This can be accomplished using Media Queries.
Regards,
Ismael
Yes 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.
To clarify what I'm asking - I don't know where, or how to make the change.
I understand it conceptually but I'm looking for specifics.
Does my question make sense? I'm surprised that this hasn't been asked before, looking forward to your response!
So 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?
Ok, found it, needed to add:
.products .product.first {
clear: none;
}
Hi!
Glad that you solved the problem. Thread closed.
Regards,
Peter
This topic has been closed to new replies.