Tried the CSS but doesn’t work. Weird thing is, the first time you click on the shop page, the thumbnails all showing fine, but if you click for the second time, they are cut into half. This only happened after adding the below CSS codes:
@media only screen and (min-width: 1200px) {
body.woocommerce .has-one-sidebar ul.products li.product {
width: 212px;
}
}
@media only screen and (max-width: 767px) {
.woocommerce ul.products li.product figure {
padding-bottom: 208px!important;
}
}
@media only screen and (max-width: 479px) {
.woocommerce ul.products li.product figure {
padding-bottom: 128px!important;
}
}
@media only screen and (min-width: 1200px) {
body.single div.related ul.products li {
width: 212px !important;
}
}
.