Return to previous page

Product image vs grid size and spacing - by Roberts

This topic has 13 replies, 3 voices, and was last updated 7 years, 10 months ago ago by Rose Tyler

Roberts

Participant

January 7, 2017 at 15:54

Hello support team. What is the best way/code to change space between products and product size? I’ll be running my site on 4 grid per row layout and I don’t like width and big side space between products.

#151128 Copied Theme version: 3.0.3 WooCommerce version: 2.6.11

12 Answers

Rose Tyler

Support staff

January 9, 2017 at 08:14

Hello,

Could you please show a screenshot for better understanding what exactly space you want to remove?

Regards,
Rose Tyler.

#151166 Copied

Roberts

Participant

January 9, 2017 at 09:27

Sure, Rose. Here is a screenshot with arrows – https://failiem.lv/down.php?i=jhw8grsz&view

#151188 Copied
Jack Richardson

Support staff

January 9, 2017 at 10:09
Hello,

Please add this code in custom.css file:
```
.products-grid .product {
   margin-bottom: 20px;
}
```
Best regards,
Jack Richardson.
#151212 Copied
Roberts

Participant

January 9, 2017 at 10:38
Thanks Jack. What about these?
```
.products-grid .product {
    margin-left:
}
.products-grid.product-count-4 .product {
    width:
}
```
Right now I have changed values directly in /wp-content/themes/legenda/css/large-resolution.css because I wanted to see overall view. But I these lines properly insert in custom.css
#151225 Copied
Jack Richardson

Support staff

January 10, 2017 at 10:30
Hello,

You can add this css code to custom.css:
```
@media (min-width: 1200px) {.products-grid.product-count-4 .product {
    width: 205px;
}}
```
Best regards,
Jack Richardson.
#151353 Copied
Roberts

Participant

January 10, 2017 at 10:32
Thanks for getting back to me, Jack.

What about space between products? (horizontal)
```
.products-grid .product {
    margin-left:
}
```
#151355 Copied
Roberts

Participant

January 10, 2017 at 10:40
Also your provided code doesn’t work. It takes width from large-resolution.css not custom.css
```
@media (min-width: 1200px) {.products-grid.product-count-4 .product {
    width: 205px;
}}
```
#151357 Copied
Jack Richardson

Support staff

January 10, 2017 at 17:36
Hello,

Try to add !important to the code, so it’ll be:
```
@media (min-width: 1200px) {.products-grid.product-count-4 .product {
    width: 205px !important;
}}
```
As for this code:
```
.products-grid .product {
    margin-left:
}
```
Please set the value you need. You can test yourself what value will fit the best.

Best regards,
Jack Richardson.
#151456 Copied
Roberts

Participant

January 10, 2017 at 17:42
Thanks for getting back to me, Jack.

Problem with
```
.products-grid .product {
    margin-left: 15px !important;
}
```
is that it also adds 15px to the first products of the column. Original scc script adds margin only to the 2nd, 3rd and 4th products
#151459 Copied
Jack Richardson

Support staff

January 12, 2017 at 16:35
Hello,

To remove margin for the first product please use this css code:
```
.products-grid.product-count-4 .product:nth-child(4n+1) {
    margin-left: 0 !important;
}
```
Best regards,
Jack Richardson.
#151711 Copied
Roberts

Participant

January 13, 2017 at 10:31

Thanks Jack, that script works

#151776 Copied

Rose Tyler

Support staff

January 13, 2017 at 11:21

Hello,

You’re welcome!

Regards,
Rose Tyler.

#151790 Copied
Viewing 13 results - 1 through 13 (of 13 total)