Docs

[Matt M]

I would like to show 2 products (or even 3) per row when viewed on a mobile device (rather than one). Currently, I can only change the number of products per row when the screen is larger.

[Rad]

Hi Matt,

Thank you for writing in!

Could I request a url address that I can check? I could give you a css specific to you site. Which will enable it to show 2 to 3 columns on mobile device.

And which mobile devices you’re targeting? To be more specific what screen size?

Thank you.

[Matt M]

I am working on livefitapparel.net, but it isn’t live right now. I am using a maintenance mode type plugin.

It looks like 480px width is where it switches over to 1 product per row currently. I am not targeting any specific mobile device, but I imagine the iPhone sized screen is about the smallest we would be worried about.

So basically, anytime the theme would default to 1 product per row, I want that to be 2 products per row (or 3).

[Support]

Hi there!

Thank you for using the theme!

Please use this on Customizer > Custom > CSS:

@media (max-width: 480px) {
.woocommerce .cols-2 li.product, .woocommerce .cols-3 li.product, .woocommerce .cols-4 li.product, .woocommerce.columns-2 li.product, .woocommerce.columns-3 li.product, .woocommerce.columns-4 li.product {
width: 48%;
}
}

I hope that helps. Cheers!

[Matt M]

Works great! Thanks!

[Support]

Glad it is working. Don’t hesitate to ask us if you have any questions. Cheers!

[Jameson]

That helped me too, thanks! Was afraid of necroposting, but this was just a few days ago, so.

[Christian]

You’re welcome Jameson.

[astratelli]

Hi there,

Would you please be able to help me do the opposite for my site? I am trying to get 1 product per row for my mobile site http://www.astratelli.com.

Thanks!

[Rupok]

Hello astratelli,

I can see one product on mobile view for the first page. Let me know on which page you want the change. I’ll assist you to achieve that.

Thanks

[hawa2015]

i need to see more then the current maximum of 4 colums – where can i change that value

[Rad]

Hi there,

You can try something like this, 5 column.

.woocommerce .cols-2 li.product, .woocommerce .cols-3 li.product, .woocommerce .cols-4 li.product, .woocommerce.columns-2 li.product, .woocommerce.columns-3 li.product, .woocommerce.columns-4 li.product {
width: 19%;
}

Single column is 100%, then divide it to 5, so 20%. But each column could have 1% margin then 19%.

Cheers!

[hawa2015]

This reply has been marked as private.

[hawa2015]

..this changes the width of each column but the column counter stays 4…

[Rue Nel]

Hello There,

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thank you.

[Author]

Posts