Hello,
Thanks for connecting with us.
We have checked your website but this type of problem your inline and WooCommerce CSS conflict.
1. Please remove the below inline CSS in your theme.
@media only screen and (max-width: 480px){
.woocommerce .products.mobile-2-col .product{ width: 317px !important; }
}
@media only screen and (min-width: 481px) and (max-width: 768px){
.woocommerce .products.tablet-3-col .product { width: 230px !important; }
}
2. Please remove the below CSS in your woocommerce.min.css file.
.woocommerce .products.mobile-2-col .product { width:50% !important }
.woocommerce .products.tablet-3-col .product { width:33.33% !important }
Please check and let me know if you have anything else.
Thanks,
Thread Starter
mseka
(@mseka)
hi @patelketan thanks for your quick response.
I do remove the inline CSS you refer above, it’s looking good when I using a responsive with laptop browser (Inspect element feature),
but it seems still cutting off on the actual phone
https://snipboard.io/eIN0sZ.jpg
Am I missing something?
Thank you
Hello,
Please remove the below CSS in your woocommerce.min.css file.
@media only screen and (min-width: 481px) and (max-width: 768px) {
.woocommerce .products.mobile-2-col .product { width:50% !important }
.woocommerce .products.tablet-3-col .product { width:33.33% !important }
}
Thanks,