Archived topic
Product Columns not obeying Customize settings on mobile/tablet
11 replies · Started by loadingartist on January 9, 2020
Hi there!
I'm using GP Premium with Woocommerce and I have noticed a strange bug? In my Customizer I have set my Product Columns to be 3 for Desktop, 2 for tablet, and 1 for mobile. It looks fine and working in the category pages, but whenever I go to a custom page the tablet/mobile versions are ALWAYS 2 columns (no matter what setting I have set in Customizer).
For my custom pages I am using Sections. Even if I try force columns in my Woocommerce shortcodes, it is still always 2 columns on tablet/mobile.
I have tried deactivating all non GP plugins, but it doesn't affect it. I don't have any caching plugins at the moment, and I have also tried viewing it in another browser.
I have included my bypass link in this thread's URL, and here is a custom page example: https://store.loadingartist.com/code-cat-collection/
Thank you for your time!
Gregor
Hi there,
GP's customizer settings don't control the shortcodes columns unfortunately.
It only controls the columns in the default archive (shop, category etc) pages.
Hi Leo, thanks for the reply.
I see, but if I don't include any columns specification in the shortcode, should it not be following the customizer settings? E.g. [products limit="4" tag="hoodie"]
And even if I do include columns in the shortcode, mobile/tablet is still always 2 columns no matter what.
The customizer should have nothing to do with the shortcodes.
Looks like the default would be 4 if you don't set the columns in the shortcode:
https://docs.woocommerce.com/document/woocommerce-shortcodes/#section-7
Doesn't look like they included the mobile column selection unfortunately.
I noticed that when building Prime too:
https://gpsites.co/prime/
Are you looking for just 1 column on mobile?
Oh I see..! So it's Woocommerce lacking the mobile option with their shortcodes.
Yeah I'm looking to have just 1 column on mobile, and 2 on tablet, ideally. Is that something that can be overwritten via CSS?
They are using the breakpoint 768px which is pretty standard.
Give this a shot:
@media (max-width: 768px) {
.site-content .woocommerce ul.products[class*=columns-] li.product,
.site-content .woocommerce-page ul.products[class*=columns-] li.product {
width: 100%;
float: none;
clear: none;
margin: 0 0 2.992em;
}
}Adding CSS: https://docs.generatepress.com/article/adding-css/
Hey Leo thanks for the reply. I tried adding that via SimpleCSS but noticed no change unfortunately..! Even adding a display:none; has no effect, but..
@media (max-width: 768px) {
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
width: 100%;
float: none;
}
}Doing this code, while still not affecting anything to do with columns, the display:none; does hide everything (so I know it's at least running). Odd..!
Can you try the edited code?
https://generatepress.com/forums/topic/product-columns-not-obeying-customize-settings-on-mobile-tablet/#post-1127458
Hmm still nothing..! 🤔 Even adding a display:none; as a test doesn't change anything either.
Awesome, that works! Thank you so much, Leo!
My final code (to also get it to 2 columns for tablet) is:
@media (max-width: 768px) {
.site-content .woocommerce ul.products[class*=columns-] li.product,
.site-content .woocommerce-page ul.products[class*=columns-] li.product {
width: 100%;
float: none;
clear: none;
margin: 0 0 2.992em;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.site-content .woocommerce ul.products[class*=columns-] li.product,
.site-content .woocommerce-page ul.products[class*=columns-] li.product {
width: 50% !important;
float: left !important;
clear: none;
margin: 0 0 2.992em;
}
}No problem :)
