[Resolved] Responsive WooCommerce Product Blocks

[Pedro]

Hello! I have made the page of my site with Gutenberg.

On this page, I have sections of products that I have made with WooCommerce Product Blocks.

In the desktop version everything is fine. But in the mobile version there is no way to edit it.

I would like to do the following: For the pages of the store, I have configured that in the mobile version 2 product columns are shown.

I would like for this homepage to be the same, because although I have the configuration for 2 columns, only 1 column is being shown.

[David]

Hi there,

try this CSS:

@media(max-width: 768px) {
    .woocommerce[class*=columns-] ul.products li.product {
        width: 48% !important;
        float: left !important;
        margin-left: 1%;
        margin-right: 1%;
    }
}

[Pedro]

Hello David! This worked, thank you very much.

However, there are sections where it is not displayed well, both on the home page and on the store pages.

I send you a screenshot so you can see.

https://www.dropbox.com/s/wjz6c64gafnfg84/IMG_2004.PNG?dl=0

[David]

Try adding this CSS:

.woocommerce ul.products li.product .woocommerce-LoopProduct-link h2 {
    line-height: 2.5ex;
    height: 10ex;
    overflow: hidden;
}

[Pedro]

Hello david!!

Yes it worked but it affected the style and it does not look good now.

You can see in the following screenshot:
https://www.dropbox.com/s/qlqihmmesjzitf3/IMG_2005.PNG?dl=0

[David]

its because some titles are running to 4 lines. We can either increase the height to height: 10ex; which will make them all 4 lines deep

[Pedro]

Hello david! And how can I do that?

[David]

I edited the CSS here:
https://generatepress.com/forums/topic/responsive-woocommerce-product-blocks/#post-815463

[Pedro]

Hello david! For some products the problem was corrected, but in others the problem continued.

[David]

I just added the two CSS codes ( using Dev tools ) and i can’t see the broken layout. Also keeps all your review starts and prices in line which looks better. Let me know.

[Pedro]

Hello david!

If you notice, in the following image the stars of the reviews do not show correctly:

https://www.dropbox.com/s/a2i4rugg3dh7iaw/IMG_2008.PNG?dl=0

[David]

I updated the code here so it will hide the 5th line.

[Pedro]

Hello david!

I have updated it and now all the products appear well located, like the stars of the valuations.

However, I can see that the titles of some products (the longest) appear incomplete.

What is this about?

[David]

The code forces it to display a maximum of 4 lines. I thought it better the title is clipped on smaller devices then it create some huge spaces between your smaller titles and prices. The alternative is to use this CSS where 5 lines are set:

.woocommerce ul.products li.product .woocommerce-LoopProduct-link h2 {
    line-height: 2.5ex;
    height: 12.5ex;
    overflow: hidden;
}

[Pedro]

Hello david! It works perfectly. Thank you very much for all the help!

[Author]

Posts