[Resolved] WooCommerce Products on tabled portrait mode – from 1 to 2 or 3….

[Berto]

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

[David]

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

[Berto]

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;
}

[David]

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

[Berto]

#main ul.products li.product

Did the trick.

Cheers.

[David]

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 😉

[Author]

Posts