Increase the size of images in a virtual store

Question

I wanted to increase these images of products, I was able to increase the size, but it cuts part of the image in width and it gets bad, the layout of the images is very close together. Does anyone know how to increase product spacing?

I don’t know if I did it right. I’m not a programmer, I know very little and I move around, if I have a solution, thank you. And if you can increase the width of the full page as well.

.product .product-image {
    border-bottom: 1px solid #eee;
    font-size: 0;
    height: 400px;
    width: 100%;
    margin-bottom: 15px;
    text-align: center;
}

.product .product-image img {
    display: inline-block;
    max-height: 100%;
    max-width: 100%;
    height: 400px;
    vertical-align: middle;
}

Here you can see the products and code by inspecting.

https://reacendamodafeminina.commercesuite.com.br/loja/loja.php?loja=497572&opencode_theme=5874e9ec537b0

Answer 1

In fact to increase the image height you need to increase the width proportionally. A hint would be to show less item at a time on each line, 2 instead of 3. For this, if possible, you need to change the HTML of the list that displays the products.

Of

<li class="col-sm-4" data-tray-tst="vitrine_produto"> ... </li>

To

<li class="col-sm-6" data-tray-tst="vitrine_produto"> ... </li>

The result would be something like the print below. I made some adjustments to the css, but the problem is the available width to display the products.

Answer 2

My tip would be to actually change the page width: increase to 1300px;

<div class="row">

element.style {
   width: 1300px;
}

And remove the lateral borders of the image div:

class="product";