Padding on gridview – mobile

[alexanderchristiansen]

Hi awesome Swift,
I have this page:http://new.organicbasics.dk/product/boxers/
If you see it on mobile – and scroll to the 2×2 grid.
I have the correct padding to left and right – but seems like the padding in the middle isn’t the same as the outter padding.
I have set it to 2% in the outter padding – but dont know how to have 2% padding between the left and right product?

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

@media screen and (max-width:479px) {
.woocommerce .products.product-grid .product:not(.product-layout-list) {
   padding: 0px 6px !important;
}
}

Thanks
Mohammad

[alexanderchristiansen]

Mohammed,
Thanks for your input.
Almost worked it out!
Now it’s only cutting the image to the right in a slightly unconvenient way – so the photos doesn’t appear to be centered.
Please see attached.

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code also:-

@media screen and (max-width:479px) {
.woocommerce .products.product-grid .product:nth-child(even) {
   left: 183px !important;
}
}

Thanks
Mohammad