Make WooCommerce Product Images smaller into mobile view? - css

Question

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
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.

Answer 1

A rule of thumb is to let the browser render as much as possible on its own, to stay responsive and keep the performance up. The more you do yourself, the less well suited your site will be.
Using flex boxes make this really handy:
#media only screen and (max-width: 500px) {
.item {
max-width: 150px;
}
}
.item {
max-width: 200px;
}
#container {
display: flex;
flex-wrap: wrap;
}
img {
width: 100%;
}
<div id="container">
<div class="item">
<img src="https://reinigungsmittel-grass.de/wp-content/uploads/2018/06/Carwash-foam_20-500x597.png">
</div>
<div class="item">
<img src="https://reinigungsmittel-grass.de/wp-content/uploads/2018/06/Carwash-foam_20-500x597.png">
</div>
<div class="item">
<img src="https://reinigungsmittel-grass.de/wp-content/uploads/2018/06/Carwash-foam_20-500x597.png">
</div>
<div class="item">
<img src="https://reinigungsmittel-grass.de/wp-content/uploads/2018/06/Carwash-foam_20-500x597.png">
</div>
<div class="item">
<img src="https://reinigungsmittel-grass.de/wp-content/uploads/2018/06/Carwash-foam_20-500x597.png">
</div>
</div>
Note: As you have a resolution bigger then 500px all such boxes will be at maximum 200 pixels wide, if it is smaller they shrink to 150px. Everything in that box will resize and by setting the image width to 100% it does also resize according to its parent box. That way you won't have to mess around with all those values across your css and html.
Of cause you can replace the pixel values by percentages as you did on your side, resulting in the style you wanted to have.
Here is a nice summary on flex boxes and what you can do with them: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

Most phone devices are 425px or less in width. Because your images are size hard-coded, I'm going to provide a hard-coded solution aswell
#media only screen and (max-width: 425px) {
.woocommerce ul.products li.product a img {
height: 200px;
width: 70%;
margin: 0 auto;
}
}
You can tweak the values as you want.
You need to adjust both height and width accordingly to not cut the images off.