Tagged: mobile friendly, woocommerce
Hi,
i’m wanting some help with making my woocommerce store more mobile friendly. Currently on mobile, the product grid is only one column on product pages and home pages. Is there a way I can make this show two?
I’ve tried adding code from previous topics similar to this but it hasn’t worked properly.
Also, with the image slider on my home page – is there a way I can make this more mobile friendly as it currently squishes it right down and cuts off the image/text?
Thanks!
Molly
Hey Molly,
Thanks for contacting us!
Please add following code to Quick CSS field in Enfold theme options > General Styling tab
@media only screen and (max-width: 480px) {
.responsive #top #main .products .product:nth-child(2n) {
margin-left: 2%;
}
.responsive #top #main .products .product {
width: 48%;
}
}
Best regards,
Yigit
Perfect, thanks so much for that!
Is there a way to stop this affecting the product slider on the home page? 🙂
Hi,
You are welcome! :)
Please try changing the code to following one
@media only screen and (max-width: 480px) {
.responsive #top:not(.home) #main .products .product:nth-child(2n) {
margin-left: 2%;
}
.responsive #top:not(.home) #main .products .product {
width: 48%;
}
}
Best regards,
Yigit
Perfect, thank you!
Also, is there a way I can have the product slider on the home page show just one column to slide across through rather than the 5 going downwards?
Thanks!
Hi,
You are welcome!
Due to the structure of the element, I am afraid that is not possible with some small customization. You could try using Post Slider element on mobile to display your products however that does not display add to cart button and the price.
Best regards,
Yigit
No worries, thanks for your help!