- This topic has 5 replies, 2 voices, and was last updated 8 years, 7 months ago by
.
I’m wanting the mobile view to show 2×2 product layout instead of 1 image. Similar to the attached picture..
Thanks for your help!
Hi @vanityinvancity,
I hope you are well today and thank you for your question.
Could you please share me your site URL where it’s displaying so that i can help you to achieve it?
Best regards,
Shufflehound teamHi Shufflehound team!
Thank you for the response. My URL is http://www.chronicexpress.ca/
You can achieve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
@media (max-width: 800px){ .sh-woocommerce-products .woocommerce.columns-4 ul.products li.product { width: 50%; } }Thanks! That works great for the home page shop (the ‘jump-to-section” shop area) but what about for the actual shop page for mobile? I’ve attached what the shop page looks and the ‘jump to’ shop page. Thanks again!
To make it work on shop page also try using below custom CSS code instead of above.
@media (max-width: 800px){ .sh-woocommerce-products .woocommerce.columns-4 ul.products li.product, .archive.tax-product_cat #page-container ul.products li.product, .post-type-archive-product #page-container ul.products li.product { width: 50% !Important; } }
