Products per row mobile view

[ambassaden]

I can only see one product (or block) per row in mobile mode. How do i change to two or three products per row?

Marcus

[Andy]

For two per row, use this CSS code:

@media only screen and (max-width: 480px) {
    .woocommerce ul.products.columns-2,
    .woocommerce-page ul.products.columns-2,
    .woocommerce ul.products.columns-3,
    .woocommerce-page ul.products.columns-3,
    .woocommerce ul.products.columns-4,
    .woocommerce-page ul.products.columns-4,
    .woocommerce ul.products.columns-5,
    .woocommerce-page ul.products.columns-5,
    .woocommerce ul.products.columns-6,
    .woocommerce-page ul.products.columns-6,
    .woocommerce ul.products.columns-7,
    .woocommerce-page ul.products.columns-7,
    .woocommerce ul.products.columns-8,
    .woocommerce-page ul.products.columns-8,
    .wc-block-grid.has-2-columns .wc-block-grid__products,
    .wc-block-grid.has-3-columns .wc-block-grid__products,
    .wc-block-grid.has-4-columns .wc-block-grid__products,
    .wc-block-grid.has-5-columns .wc-block-grid__products,
    .wc-block-grid.has-6-columns .wc-block-grid__products,
    .wc-block-grid.has-7-columns .wc-block-grid__products,
    .wc-block-grid.has-8-columns .wc-block-grid__products {
        grid-template-columns: repeat(2,48.5%);
    }
}

For three per row use this:

@media only screen and (max-width: 768px) {
    .woocommerce ul.products.columns-2,
    .woocommerce-page ul.products.columns-2,
    .woocommerce ul.products.columns-3,
    .woocommerce-page ul.products.columns-3,
    .woocommerce ul.products.columns-4,
    .woocommerce-page ul.products.columns-4,
    .woocommerce ul.products.columns-5,
    .woocommerce-page ul.products.columns-5,
    .woocommerce ul.products.columns-6,
    .woocommerce-page ul.products.columns-6,
    .woocommerce ul.products.columns-7,
    .woocommerce-page ul.products.columns-7,
    .woocommerce ul.products.columns-8,
    .woocommerce-page ul.products.columns-8,
    .wc-block-grid.has-2-columns .wc-block-grid__products,
    .wc-block-grid.has-3-columns .wc-block-grid__products,
    .wc-block-grid.has-4-columns .wc-block-grid__products,
    .wc-block-grid.has-5-columns .wc-block-grid__products,
    .wc-block-grid.has-6-columns .wc-block-grid__products,
    .wc-block-grid.has-7-columns .wc-block-grid__products,
    .wc-block-grid.has-8-columns .wc-block-grid__products {
        grid-template-columns: repeat(3,31.33%);
    }
}

Copy the code to ‘Customize’ > ‘Additional CSS’ and hit publish button to save.

[ambassaden]

Thank you! Worked great

[ambassaden]

Btw. Is it possible to do something with the main page? The blocks (and text) are huge in the mobile version. Only one block per row

Cheers Marcus

[Author]

Posts