Archived topic
Woocommerce product colums on mobile (archives)
9 replies · Started by Jarno on June 21, 2018
On mobile the woocommerce shop shows only one column, however I want to change this at least for tablet devices to more columns than 1. Let's say that I want 3 or 2 columns on tablet portrait mode. Are there any standard settings in GP to do this?
Thanks!
Hi, you may find this topic of use Tom has provided CSS for 2 columns in portrait tablet mode
https://generatepress.com/forums/topic/column-shop-layout-in-desktop-ipad-mobile/#post-470371
I will look into to it. For now I will mark this one as resolved.
Thanks again!
Glad to be of help.
So I added the CSS from the topic mentioned by you. However nothing is happening and I don't understand why.
Used code is below. I added this to the extra CSS.
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
.woocommerce .wc-mobile-columns-1 ul.products li.product,
.woocommerce-page .wc-mobile-columns-1 ul.products li.product {
width: 46.2%;
clear: none !important;
}
.woocommerce .wc-mobile-columns-1 ul.products li.product:nth-child(2n+1),
.woocommerce-page .wc-mobile-columns-1 ul.products li.product:nth-child(2n+1) {
clear: both !important;
}
}Hi Jarno, ok you're using Elementor. That changes things a bit. Can you try this code instead:
@media (max-width: 768px) and (min-width: 420px) {
.elementor-widget-container .woocommerce .wc-columns-4 ul.products li.product,
.elementor-widget-container .woocommerce-page .wc-columns-4 ul.products li.product,
.elementor-widget-container .woocommerce-page.columns-4 ul.products li.product,
.elementor-widget-container .woocommerce.columns-4 ul.products li.product {
width: 48%;
margin-left: 2%;
float: left !important;
}
}Nope, doesn't work either. Nothing changes.
Just to let you know, I also run CSSHero on this website.
I updated the code above, give that a try.....
Yes! This worked.
Thank you very much!
Phew.... at last lol! Glad it worked!
