Okay
  Public Ticket #1634324
2 Column Shop Page on Mobile
Closed

Comments

  • Heather started the conversation

    I'm showing 4 columns of products on the Shop Page, but on mobile, they are in a single line that goes on forever. Is there a way to show 2 columns on the mobile site, instead of just 1?

  •  211
    Nico replied

    Hi Heather,

    You will have to use a custom CSS for that, try adding this CSS code:

    @media (max-width: 767px) {
    .woocommerce #main .products .product, .woocommerce-page .products .product{
        width: 49% !important;
    }
    .woocommerce #main ul.products li.product h3, .woocommerce-page #main ul.products li.product h2, .woocommerce #main ul.products li.product h3, .woocommerce-page #main ul.products li.product h2{
        width: 100%;
        display: block;
    }
    .woocommerce #main .products .product .price, .woocommerce-page .products .product .price{
        width: 100%;
        display: block;
    }
    }
    

  • Heather replied

    Worked perfectly! Thank you.