Archived topic
Responsive WooCommerce Product Blocks
17 replies · Started by Pedro on February 20, 2019
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.
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%;
}
}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.
Try adding this CSS:
.woocommerce ul.products li.product .woocommerce-LoopProduct-link h2 {
line-height: 2.5ex;
height: 10ex;
overflow: hidden;
}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
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
Hello david! And how can I do that?
I edited the CSS here:
https://generatepress.com/forums/topic/responsive-woocommerce-product-blocks/#post-815463
Hello david! For some products the problem was corrected, but in others the problem continued.
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.
Hello david!
If you notice, in the following image the stars of the reviews do not show correctly:
I updated the code here so it will hide the 5th line.
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?
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;
}Hello david! It works perfectly. Thank you very much for all the help!
