I work on small project , and need to make product images smaller when is seen from mobile view. Currently images are too big, and spacing between each other (i have two products in line) is too small, so want to make separated so the client can get a better overview of the products.

[image from smartphone](https://i.stack.imgur.com/jOE9S.png)

i tryed to play with image CSS, like this:

```
@media only screen and (max-width: 600px) {
.woocommerce ul.products li.product a img {
    height:265px; //to make image smaller so can get more spacing between.
}
}

```

but that seems to make images smaller, but also cut it off, so its not ok. Can someone to help me, how to make images smaller, but image do not crop? Example from site [here](https://reinigungsmittel-grass.de/autoshampoo-2/).