[Resolved] Show more woocommerce columns on extra large screens

Home Forums Support Show more woocommerce columns on extra large screens

  • This topic has 5 replies, 3 voices, and was last updated 3 months ago by David.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1339109
    Raul

    Hello team,

    is there a way of showing more columns in woocommerce products for very large screens?

    I tried this with no luck

    @media (max-width: 3000px) and (min-width: 1500px) {
        .woocommerce .wc-columns-container .wc-columns-5 .products {
            -ms-grid-columns: (1fr)[6] !important;
            grid-template-columns: repeat(6, 1fr) !important;
        }
    }
    #1339508
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Something like that should work. For example:

    @media (max-width: 3000px) and (min-width: 1500px) {
        .wc-columns-container.wc-columns-5 .products, 
        .wc-related-upsell-columns-5 .related ul.products, 
        .wc-related-upsell-columns-5 .up-sells ul.products {
            grid-template-columns: repeat(6,minmax(0,1fr));
        }
    }
    #1340160
    Raul

    Works perfectly!

    Could it be possible to resize the .left-sidebar accordantly? It is set up to 20% on theme customize options, but I would like it to be 25% for that media query. I tried the following with no luck…

      
        #left-sidebar .widget-area .grid-20 {
            width: 25%;
        }
        
        #left-sidebar .widget-area .pull-80 {
            left: -75%;
        }

    Can you please take a look?

    #1340191
    David
    Staff
    Customer Support

    Hi there,

    Try adding this CSS within that media query:

    .woocommerce.left-sidebar  #left-sidebar {
        left: -75%;
        width: 25%;
    }
    .woocommerce.left-sidebar  #primary {
        left: 25%;
        width: 75%;
    }
    #1340482
    Raul

    Thanks David and Tom,

    this works great!

    #1341169
    David
    Staff
    Customer Support

    Glad we could be of help

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