Return to previous page

How to increase the space between products?

This topic has 4 replies, 2 voices, and was last updated 7 years 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)