Increase the size of images in a virtual store

Navigation
0

I wanted to increase these product images, I managed to increase the size, but it cuts part of the image in width and it gets poor, the arrangement of the images is very close together. Does anyone know how to increase product spacing?

I do not know if I did it right. I'm not a programmer, I know very little and I'm moving, if you have a solution, thank you. And if you have how to increase the width of the entire 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 the code by inspecting.

link

    
asked by anonymous 11.01.2017 / 18:06

2 answers

1

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

From 

<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 itself is the width available to display the products.

    
11.01.2017 / 18:34
0

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

<div class="row">

element.style {
   width: 1300px;
}

And remove the side borders of the div from the image: 

class="product";
    
11.01.2017 / 18:52
Disable modal window button using Jquery Silex can not find routes