- This topic has 16 replies, 3 voices, and was last updated 5 years, 3 months ago by
.
-
Posts
-
Hello,
I set 300px as image size in customize > woocommerce. https://prnt.sc/zhjln1
It is working very well in shop pages, categories and also Related/Upsell Columns. HereBut I have an issue in main page.
I create columns in main page by woocommerce shortcodes. Like this.
[products limit="4" columns="4" orderby="id" order="DESC"]
But the product images are not exactly 300px and there is gap between them.
https://prnt.sc/zhju0jAny suggestion to fix it?
Can I use category design in main page? like this.
Customer Support
Hi there,
try this CSS:
.home .woocommerce ul.products li.product { margin-right: 10px; width: calc(25% - 10px); }Adjust the 10px to suit.
Hi David,
Thank you.
Great in desktop.
But mobile become weird. https://prnt.sc/zidnbrthe weird thing is, woocommerce use 300pcs images but resize them to 272px.
I don’t understand why.Customer Support
Hi Tertas,
We could add a media query to limit the CSS only works for desktop.
@media (min-width: 769px) { .home .woocommerce ul.products li.product{ width: calc(25% - 15px); } .home .woocommerce ul.products li.product:not(.last) { margin-right: 15px; } .woocommerce ul.products { margin-left: 7px; margin-right: -7px; } }Let me know 🙂
Hello Ying,
Worked well, thanks.
It is weird that it is not working out of the box.
No problem 🙂
I just realized that this CSS makes right space 25px.
15px from container + 10px from css code.Do you need us to help with anything? Let me know 🙂
Hi Ying,
If you have time sure need help 🙂This code add 10px margin for last product too. “margin-right: 10px;”
Which means last product have total 25px margin to container.
But it should be 15px like left product.Haha I’m actually quite busy 😛
We could modify the selector so that the last product won’t be targeted, edited CSS here:
https://generatepress.com/forums/topic/woocommerce-image-size-created-with-shortcodes/#post-1658241Let me know if it works.
Have a nice day. Sorry to keep you more busy 🙁
Btw, Latest code makes the last product smaller. https://prnt.sc/zuwl1iLets keep the margin gap to 15px then you can do this:
@media (min-width: 769px) { .home .woocommerce ul.products li.product{ width: calc(25% - 15px); } .home .woocommerce ul.products li.product:not(.last) { margin-right: 15px; } }Hello David,
Thanks for the code, but result is similar.
https://prnt.sc/zvw465I tried to put arrows regarding the issue.
regards
Hi Tertas,
I edited my pervious CSS here, try this one instead:
https://generatepress.com/forums/topic/woocommerce-image-size-created-with-shortcodes/#post-1658241
- You must be logged in to reply to this topic.
