How can I add spacing between my products on a webpage?

Store Design
1

Hello,

I am trying to add spacing between my products on https://www.purrseus.co.uk/collections/cat-harnesses (pw is 3).

I looked at the CSS in inspect element, and I can see that the class I need to edit in theme.scss.liquid is .product-class*.*

I have tried adding padding and margins to the CSS but to no avail.

Can anyone please assist me to add space between the products on this page?

NickNicolaou_0-1628262354939.png
NickNicolaou_0-1628262354939.png1203×492 208 KB

Thanks!

1 Like
2

@NickNicolaou

sorry for that issue can you please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.template-collection .grid--no-gutters {
display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
1 Like
3

@KetanKumar - Thank you so much for replying and adding a potential solution for this!

Here is what the changes look like:

NickNicolaou_0-1628263190101.png
NickNicolaou_0-1628263190101.png1028×480 149 KB

It looks a lot better, but unfortunately, it was not exactly what I was hoping for!

Do you know how I can get spacing in between each different product so they are not so close together?

4

@NickNicolaou your store is not accessible without a password.

1 Like
5

Hi there, the password (pw) is 3 @g33kgirl

6

@NickNicolaou

yes please add this code

@media only screen and (min-width: 750px) {
.template-collection .grid--no-gutters .medium-up--one-fifth {
    width: 25%;
    -ms-flex-preferred-size: 25%;
    -webkit-flex-basis: 25%;
    -moz-flex-basis: 25%;
    flex-basis: 25%;
}
}
7

@KetanKumar , This has caused it to go large but has not added a space, unfortunately.

NickNicolaou_1-1628348709493.png
NickNicolaou_1-1628348709493.png1165×598 275 KB

8

@NickNicolaou .grid–no-gutters means no padding between the grid items. If you remove this class from div in Templates → collection.liquid (line 25), it will show the grid items with spacing.

If you don’t want to remove the no-gutters class, the other way to do is via CSS:

.template-collection .grid--no-gutters>.grid__item {
    padding-left: 10px !important;
    padding-right: 10px;
    padding-bottom: 20px;
}
1 Like
9

This is perfect! Thank you very much for the help! The products now show spacing between them :slightly_smiling_face: