Center Woocommerce Products on ipad/Mobile in Content Area

[ephoenix]

Hey There,

I am trying to center the Woocommerce products on my frontpage for mobile/small tablet. I have it broken down into 2 rows. On mobile, it looks fine. On the tablet, it is stuck on the left side, leaving half the page blank.
I have the below css in place to create 2 woo product mobile columns. Idealy I would like this to stretch to fit the screen larger tablet screen, not float left and leave the right side blank.
I have gone through these forums and tried everything, but I jsut can’t get it to work for me.

Any help would be AWESOME!!!

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

[ruenel]

Hello @lgiguere,

Thanks for writing in! Your custom css only applies to mobile screens. If you want to include tablets, please updated your code and use this code instead:

@media(max-width: 767px) {
  .woocommerce .cols-4 li.product, 
  .woocommerce.columns-4 li.product {
    width:48% !important;
  }
}

We would love to know if this has works for you. Thank you.

[ephoenix]

@RueNel

@media(max-width: 767px) {
.woocommerce .cols-4 li.product,
.woocommerce.columns-4 li.product {
width:48% !important;
}
}

That was perfect. I was confused by using because it looked right in the editor but not on actual tablet
.
This did the trick. Thanks so much!

[nabeel]

Glad we could help.

Cheers!