Help with iPad portrait view

Hi
Would it be possible for someone to assist me with altering my products to display 4 in a row instead of 2 in portrait mode on iPad please? I still want the current view on phone devices to stay the same I.e 2 in a row.

My web address is https://www.yumyumsweets.shop

Thank you

Hi @Daines

I’ve checked your website and I believe this is the code snippet you are looking for:


@media (max-width: 979px) and (min-width: 690px){
    .woocommerce li.product.first {
        clear: both!important;
    }
    .woocommerce .cols-3 li.product, .woocommerce .cols-4 li.product, .woocommerce.columns-3 li.product, .woocommerce.columns-4 li.product {
        width: 22% !important;
    }
    .woocommerce .cols-3 li.product:nth-child(2n+2), .woocommerce .cols-4 li.product:nth-child(2n+2), .woocommerce.columns-3 li.product:nth-child(2n+2), .woocommerce.columns-4 li.product:nth-child(2n+2) {
        margin-right: 4%;
    }
    .woocommerce .cols-3 li.product:nth-child(2n+3), .woocommerce .cols-4 li.product:nth-child(2n+3), .woocommerce.columns-3 li.product:nth-child(2n+3), .woocommerce.columns-4 li.product:nth-child(2n+3) {
        clear: none;
    }
    .woocommerce li.product.last {
        margin-right: 0!important;
    }
} 

You can change the (max-width: 979px) and (min-width: 690px) values to suit your needs. This CSS code snippet can be added to (Theme Options > CSS)

Thanks.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.