Create 2 Columns of WooCommerce Products in Mobile View

[racheldeters]

Hello, I am trying to show 2 columns of products on my homepage when in mobile view. Right now it is only 1 column wide. I tried using the following code, but it didn’t work.

@media only screen and (max-width: 479px) {
.woocommerce.archive .products .product {
width: 50%;
float: left;
}
}

Thanks!
Rachel

[Kyle – SUPPORT]

Try:

@media only screen and (max-width: 479px) {
.woocommerce .products .product {
width: 50%;
float: left;
}
}

– Kyle

[racheldeters]

Hm. I added the custom CSS and it didn’t work (see screenshot).

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Try with !important:

@media only screen and (max-width: 479px) {
.woocommerce .products .product {
  float: left!important;
  width: 50%!important;
}
}

– Kyle

[racheldeters]

It’s strange because on my phone it still shows one column of products (after I cleared my browsing history) but when I use the following site (http://ipadpeek.com/) it shoes the 2 columns. Any idea why that may be?

[Kyle – SUPPORT]

Getting a memory limit issue on your site, please check with your hosts

– Kyle

[racheldeters]

Hi Kyle,

My site is now unlocked but I cannot get into my Admin page to get rid of the custom CSS that is causing my site issues. Are you able to access my custom CSS and remove the line that was inserted to create 2 columns when viewing on mobile platform?

[Kyle – SUPPORT]

I’m not able to access your backend either, the reason the css was not working is because you have W3 Total Cache enabled, you need to disable it whilst making development changes.

– Kyle

[racheldeters]

I had my host disable the totalcache plugin since I couldn’t access my wordpress backend myself. I still cannot get into my wordpress backend though. Whenever I try to login through the atelier login page I just get redirected to my homepage. Not sure why my host can access my administrator page and says it works for them but I can’t log in?

[racheldeters]

Hi, Any ideas of how to fix this? Still unable to access my site’s backend.

Thanks,
Rachel

[racheldeters]

Hi Kyle,

I have been able to resolve my site issue which was preventing the 2 column woocommerce product view on mobile. With the issue resolved the code you sent earlier works like a dream. Thanks!

Rachel

[Kyle – SUPPORT]

Ok great! No problem

– Kyle

[saxenak02]

Hi Kyle,

I have same issue, mobile view of the home page shows products in single column. I tried above code of yours but it does not seem to work.
Am using Products element from page builder with “Multi-Masonry Display”. Please refer to attached screenshot.
web url: http://www.tgifashion.in

Regards,
Kuldeep

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

Try this:

@media only screen and (max-width: 479px) {
.woocommerce .products.multi-masonry-items .product {
width: 50%!important;
float: left;
}
}

– Kyle

[saxenak02]

Hi Kyle,

Thanks for the info, it worked.