Home Forums Ibsen Products per row mobile view

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #11649
    ambassaden
    Participant

    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

    #11659
    Andy
    Keymaster

    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.

    #11669
    ambassaden
    Participant

    Thank you! Worked great

    #11671
    ambassaden
    Participant

    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

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.