Okay
  Public Ticket #1714766
How to show 3 product columns on ipad
Closed

Comments

  •  1
    thscreative started the conversation
    September 17, 2018 at 11:36am

    Hi

    I tried to find a setting for this with no luck. I had a look at the laborator_woocommerce.php template but no joy there either.

    Thanks in advance for your help

  • [deleted] replied
    September 18, 2018 at 12:59pm

    Hi thscreative,

    This is a customization question and support doesn't offer customization services as we wrote on our support homepage and on this area. I will try to help you this time though

    Can you please add the code below to your Custom CSS area:

    @media screen and (max-width: 1220px) and (min-width: 769px) {
    .woocommerce .products.columns-4 .product {
        width: 33.333% !important;
    }
}

    P.S: Please be aware as by doing customization if something happens like miss-editing files the responsibility is yours and we won't support you on finding the problem, as we are only guiding you how to get the results you need.

    Have a great day!

  •  1
    thscreative replied
    September 18, 2018 at 3:22pm

    Thanks for your help with this, unfortunately there is a bit of code

    .woocommerce .products.columns-4 .product:nth-of-type(2n+1) {
    clear: left;
}

    That is making it two columns, not three. If I set the clear to none, I get three thumbnails and then a one-column-width-gap, followed by five thumbnails and then a two-column-width gap. See attached

  •  1
    thscreative replied
    September 18, 2018 at 3:28pm

    I fixed it with

    .woocommerce .products.columns-4 .product:nth-of-type(2n+1) {
    clear: none;
}
.woocommerce .products.columns-4 .product:nth-of-type(3n+1) {
    clear: left;
} 

    Thanks for your help

  • [deleted] replied
    September 19, 2018 at 6:51am

    Hi thscreative,

    Glad to hear that

    Will set this ticket as solved from here.