Return to previous page

How to increase the space between products?

This topic has 4 replies, 2 voices, and was last updated 6 years, 6 months ago ago by Rose Tyler

David Henry

Participant

May 28, 2018 at 12:59
Hi Guys,

I’m using the 8theme Products on the home page, it looks good but I need more space between the products, the problem is when I add:
```
.carousel-area .product-slide {
	padding-right: 25px;
	padding-left: 25px;
}
```
It squishes at either end too, but I’d like to keep the left and right side of the slider flush with the rest of the page. I’ve also tried adding -25px to each side but it doesn’t work.

Is there a way around this?

Please, contact administrator
for this information.
#193690 Copied
3 Answers

Rose Tyler

Support staff

May 29, 2018 at 07:55

Hello,

You can select “Stretch row and content” in Row stretch settings.

Regards

#193722 Copied
David Henry

Participant

May 31, 2018 at 14:10
I needed something more universal so I’ve added this (below) to child, but is it a good idea?
```
/*	Increase gutter
*/

.row {
    margin-right: -25px;
    margin-left: -25px;
}
.col-xs-1,
.col-sm-1,
.col-md-1,
.col-lg-1,
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2,
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3,
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5,
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6,
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7,
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-lg-8,
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9,
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-lg-10,
.col-xs-11,
.col-sm-11,
.col-md-11,
.col-lg-11,
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12 {
    padding-right: 25px;
    padding-left: 25px;
}
```
#194007 Copied
Rose Tyler

Support staff

May 31, 2018 at 15:41
Please try to use this code:
```
@media (min-width: 1200px) {
body.home .content-page {
    width: 1270px;
}
}
```
Regards
#194023 Copied
Viewing 4 results - 1 through 4 (of 4 total)