Display 2 products per line on mobile
-
I’m using the WooCommerce Products (Beta) block on a product landing page. The block by default displays 1 product per line in the mobile version, but I wanted to display 2 products per line, which CSS should I use to customize it for mobile only?
Viewing 3 replies - 1 through 3 (of 3 total)
-
Hi @cheladesign,
Head over to Appearance > Customize > Additional CSS on your site to add this custom CSS.
@media (max-width: 600px) { .wp-container-core-post-template-layout-1.wp-container-core-post-template-layout-1 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }Once you add this custom CSS, your products will display in two columns on mobile devices, as shown below:
I hope this helps! Please let us know how it goes or if you need further assistance.
Viewing 3 replies - 1 through 3 (of 3 total)
- The topic ‘Display 2 products per line on mobile’ is closed to new replies.
