Products to display no lower than 2 in a row

[hyperdrive_boom]

Good afternoon,

I have products powered by WooCommerce which on desktop display in rows of 4 - set in Pro’s theme options.

As it gets to a mobile view it displays in a row of 1. However I wish for it to never display less than 2 in a row.

What Global CSS do I need to insert to update this? I can see it changes to one at 479 pixels wide

Thank you!
Jason

[prakash_s]

Hello @hyperdrive_boom,

Thanks for writing to us.

In case if you want to set the shop products in 2 columns on the mobile view as well. You need to override the default style for that you can use this custom CSS code under Pro —>Theme Option —>CSS.

@media(max-width:479.99px)
{
[class*=woocommerce] ul.products.columns-2 li.product, [class*=woocommerce] ul.products.columns-3 li.product, [class*=woocommerce] ul.products.columns-4 li.product {
    width: 49%;
}
}

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.
Thanks

[hyperdrive_boom]

Perfect thank you!

[prakash_s]

Hello @hyperdrive_boom,

Glad that we were able to help you. Please feel free to reach us if you have any queries regarding our theme and theme settings.

Thanks