Make Products 2 Across on Mobile

[EarlySigns]

Hi there,

I was wondering if you could help me? I am trying to make products display two in a row on mobile, instead one/stacked. There isn’t an option to duplicate this and use breakpoints, one for desktop and one for mobile. What am I doing wrong?

https://simplygraphicspreview.com/brtvinyl/

Many thanks, Jayd

[prakash_s]

Hello Jayd,

Thanks for writing to us.

In order to display the product 2-column layout on the mobile mode, you need to override the style through the custom CSS code. Please add this custom CSS code under Theme Option —>CSS.

@media(max-width: 479.98px){
[class*=woocommerce] ul.products.columns-4 li.product {
width: 48%;
}
}

The purpose of providing custom CSS is 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.In case you have no idea about coding you can subscribe to One where customization questions are answered.

Hope it helps.
Thanks

[EarlySigns]

@prakash_s

@media(max-width: 479.98px){
[class*=woocommerce] ul.products.columns-4 li.product {
width: 48%;
}
}

Thats done it! Thanks so much

[tristup]

Hi Jayd,

Glad that we are able to help you.

Thanks