[Support request] Woocomerce products block not responsive

[Antonio Marcos]

Hello

I have installed the Merch template from the library. Fresh installation. The products are not displayed in a column as in the demo, neither on the main page nor on the store page.

Would there be any solution for this?

Thank you!

[Leo]

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 🙂

[Antonio Marcos]

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.

[Leo]

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

If not can you guide me to a specific section?

[Antonio Marcos]

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

[Tom]

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%;
    }
}

[Author]

Posts