Changing CSS to show a single column of products on mobile?

[DistantLands]

Currently, if you visit the Shop or Home pages on mobile, the products who up 2 per row. We want the product divs larger, and online one column wide, so it’s just a vertical list of products. How can we accomplish this on Mobile only?

[Rui Guerreiro – SUPPORT]

Hi,

Add the code below to your custom css option.

@media only screen and (max-width: 479px){
body .woocommerce-shop-page ul.products li.product, body .product_list_widget > div > ul.products li.product {
    width: 100%!important;
}
}

Let us know if it worked.

-Rui

[DistantLands]

Works great, thanks much!

[Rui Guerreiro – SUPPORT]

No problem.Glad I could help.

-Rui

[DistantLands]

For some reason, your forum doesn’t allow me to change the status on these topics, so you can close this one Resolved. THx

[David Martin – Support]

Marking as resolved.

[paulbdesign83]

Hello again guys,

I am looking to have products display single column on mobile too. I have tried adding the above code but doesn’t appear to have made a difference.

Could you please supply me with the code that would work on the Neighborhood theme?

Thanks again for you great support.

[Rui Guerreiro – SUPPORT]

Hi,

Just add the code below to your custom css option

@media only screen and (max-width: 479px) {
body .woocommerce-shop-page ul.products li.product, body .product_list_widget > div > ul.products 
   li.product {
       width: 100%!important;
   }
}

That should sort it.

-Rui

[paulbdesign83]

It still doesn’t seem to have changed. I have cleared the cache and tried in a different browser.

I have attached a screenshot incase I have missed something?

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Place it in the custom css option in the Theme options-> General options to see if it works.
They have different priorities.

-Rui

[paulbdesign83]

Perfect. Thanks again.

[Rui Guerreiro – SUPPORT]

No problem.

-Rui