How to create space between products without affecting other pages?

Store Design
1

Hi, is there a way to add a gap in between each product without messing with the gap of any other pages ?

Thanks

50384A02-68E5-4E7E-97D3-231D7D06E316.jpeg
50384A02-68E5-4E7E-97D3-231D7D06E316.jpeg828×924 86.5 KB

2

Hello @2mn ,

Can you give me your Store URL( with pass if your store password is enabled) so I can check it for you?

Kind & Best regards,
GemPages Support Team

3

Hi [email removed]2mn,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

@media(max-width:767px){
#product-grid{
 column-gap: 16px !important;
}
.grid--2-col-tablet-down .grid__item {
    width: calc(50% - 8px - var(--grid-mobile-horizontal-spacing) / 2) !important;
}
}

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

4

@2mn

Please share your site URL,
I will check out the issue and provide you a solution here.

5

https://0b2369-3.myshopify.com/collections/nike

6

Not working

7

Hello @2mn ,

You can follow these steps:

  1. Go to Online Store->Theme->Edit code

GemPages_0-1678411784132.png
GemPages_0-1678411784132.png400×193 29.2 KB

  1. Open your theme.liquid file, paste the below code before

GemPages_1-1678411805888.png
GemPages_1-1678411805888.png1654×977 72.6 KB

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

8

Hi @2mn

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

:root {
    --grid-mobile-horizontal-spacing: 16px;
}