Our shop page is 34northdrones.com/shop. The current layout of this page shows the product images blurry. I tried to change this by adding this CSS but it did not work:
.woocommerce ul.products li.product a img:{width: 50%}
I want to reduce the image size so that the responsive layout doesn’t make the images larger than the original product feature image. Is there a solution that would reduce the product thumbnail image for both the shop page and all the category pages, where we have the same issue? See example https://www.34northdrones.com/product-category/drones/
Figured it out. Here is the code I ended up using in the Advanced CSS settings for desktop: .woocommerce ul.products li.product a img{
width: 200px;
}
Here is CSS for both tablet modes: .woocommerce ul.products li.product a img{
width: 75%;
}
If there is a better way to do this, please advise – no expert at css :o)
