Archived topic
WooCommerce Products on tabled portrait mode - from 1 to 2 or 3....
5 replies · Started by Berto on May 25, 2018
What would be the best to tackle this? On portrait mode GP only displays one product column which looks odd. Fine on mobile but not on tablet, seems like a waste of space.
I know what code to override but sadly there is an !important tag which I can't undo...
/gp-premium/woocommerce/functions/css/woocommerce-mobile.min.css
.woocommerce[class*=columns-] ul.products li.product {
width: 50%; /* Original 100%
float: none!important; /*This line is using the important tag, with this in place I can't overide it.
}
Hope you understand what I mean, sometimes I confuse myself...
Thanks
Hi there, have you tried:
@media (min-width: 420px) and (max-width: 768px) {
.woocommerce[class*=columns-] ul.products li.product {
width: 50% !important;
float: left!important;
}
}Adjust media queries to suit
Yes, I did just that David.
The parent is already using the important rule so the child cannot override it.
/gp-premium/woocommerce/functions/css/woocommerce-mobile.min.css -
/*Original Code On GP Premium*/
.woocommerce[class*=columns-] ul.products li.product {
width: 100%;
float: none!important;
clear: both;
margin: 0 0 2.992em;
}Hi Berto,
try increasing the specificity of that rule by adding another preceding selector (or two) e.g:
#main .grid-container .woocommerce[class*=columns-] ul.products li.product
#main ul.products li.product
Did the trick.
Cheers.
You're welcome Berto, its a nasty hack getting around !important. As a note another alternative is to add !important to another property in the rule. So a little surprised that the original code i supplied didn't work ;)
