[Resolved] not Responsive WooCommerce Product Blocks for Mobile

[林鴻木]

Hope mobile version, the product column shows 2 products

https://local-safe.com.tw/589-2/

[Fernando]

Hello there,

On my end, viewing your page, the products are only on one column.

Tested on my personal mobile as well.

Can you try viewing on a different device to test?

[林鴻木]

In the current column, only 1 product is displayed
I want to display 2 products in one column

[林鴻木]

I want to display 2 products in one column
on mobile page

[David]

Hi there,

try adding this CSS:

@media (max-width: 480px) {
    .wc-block-grid.has-4-columns .wc-block-grid__products {
        display: flex;
    }
    .wc-block-grid.has-4-columns .wc-block-grid__product {
        flex: 1 0 50%;
        max-width: 50%;
        padding: 0;
        margin: 0 0 24px;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[林鴻木]

Thank you, it’s great to have you

[David]

Glad to be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts