[Support request] Woocomerce products block not responsive

Home Forums Support Woocomerce products block not responsive

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #961809
    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!

    #962057
    Leo
    Staff
    Customer Support

    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 🙂

    #962100
    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.

    #962180
    Leo
    Staff
    Customer Support

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

    If not can you guide me to a specific section?

    #962558
    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

    #963045
    Tom
    Lead Developer
    Lead Developer

    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%;
        }
    }
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.