Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

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

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

Home Forums Support WooCommerce Products on tabled portrait mode – from 1 to 2 or 3….

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #584572
    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

    GeneratePress 2.1.2
    #584655
    David
    Staff
    Customer Support

    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

    #589685
    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;
    }
    #589690
    David
    Staff
    Customer Support

    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

    #589698
    Berto

    #main ul.products li.product

    Did the trick.

    Cheers.

    #589699
    David
    Staff
    Customer Support

    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 😉

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.