Woocomerce products block not responsive

Hi there,

I believe the WooCommerce products update broke some things and this is the solution:
https://generatepress.com/forums/topic/woocommerce-blocks/#post-945374

The code might need a few tweaks though.

Any chance you can link us to the site in question?

You can edit the original topic and use the private URL field.

Let me know :)

Hi Leo

I have sent you with the original post the url and user / pass.

It seems that the shop page works well: through the customize panel I have chosen a product in the mobile version and everything ok.

It is on the home page or anywhere that you enter a block when it does not work.

In another post I saw the solution for the "product that passed to the next row" and solved it with this code:

.wc-block-grid.has-3-columns .wc-block-grid__product {
    flex: 1 0 calc(33% - 16px);
}
	.wc-block-grid.has-4-columns .wc-block-grid__product {
    flex: 1 0 calc(25% - 16px);
}

Thanks.

I checked the home page and looks like it's all working now?

If not can you guide me to a specific section?

I share an image of the home page woocommerce product block seen from a mobile phone. Each product should occupy the full width of the screen, according to the Merch demo.

https://drive.google.com/file/d/1dNgJRTJ6FOaN-a79ARjqss5AfxmQufgf/view?usp=sharing

It looks like the Woo Blocks plugin is missing CSS for those items on mobile.

Try this:

@media (max-width: 768px) {
    .wc-block-grid.has-4-columns .wc-block-grid__product {
        flex: 1 1 100%;
        max-width: 100%;
    }
}