Tagged: enfold, responsive, woocommerce
Hello guys,
I’m struggling with the following issue: when I assign a certain page as the ‘Shop Page’ with Woo, products are not displayed correct on mobile devices. Also, the Enfold grid is disordered (in my case: icon boxes). On mobile, products should show as 100% width, as should the icon boxes, but keep being respectively 25 en 33%.
I know that it would be easier not to assign any page as the shop page, but I need to, because it’s important to be able to filter the products.
Therefor, I user WC Products Filter and this is only working with the Woocommerce displayed products.
I could change everything in my css, but it seems to me that there is a css conflict and I can’t find it.
Any thoughts on this subject?
Thanks!
Hey Thomas!
Try adding this to your custom CSS.
@media only screen and (max-width: 479px) {
.post-type-archive-product div .av_one_fourth, div .av_one_third { margin-left: 0px !important; width: 100% !important; }
}
Best regards,
Elliott
Hello Elliot,
Thanks. This is indeed a fix, but I still don’t get what’s causing this problem.
Any thought on this subject?
Hey!
Not sure to be honest, did Elliotts code fix your problem though?
Cheers!
Rikard
Hello Rikard,
As I stated in my first post, I know how to change it in the css. So my question remains unanswered.
Thanks for your effort anyway!
Thomas