Split category archives into 2 columns on mobile

  • I was wondering if anyone could help and give me some CSS code that could split my product category archive pages into two columns only for mobile users. OR if there is a way to do it in the theme that I’m missing. Thank you.

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Thread Starter outspkn

    (@outspkn)

    Ok I think I’ve actually solved it myself already with the following CSS

    @media (max-width: 767px) {
        .woocommerce ul.products {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            width: 100%;
        }

        .woocommerce ul.products li.product {
            width: 100%;
            margin: 0;
        }
    }

    However, I wont mark as resolved yet in case there is a “better” way of implementing what I’m after.

Viewing 1 replies (of 1 total)
  • The topic ‘Split category archives into 2 columns on mobile’ is closed to new replies.