Blank space in between product images mobile

Store Design
,
1

Hello all,

I’ve been trying to reduce the blank space in between product images on mobile unsuccessfully.

I have the following code and I’ve been trying to increase/decrease px but it just modifies the size of the images but not the gap in between them :

.product-grid.grid {
margin-left: -5px;
margin-right: -15px;
}

website : www.hintofhappiness.com

password : seiyud

thanks in advance for your help !

Karla

2

Hi,

Can you let us know which page you are trying to decrease the blank space

3

Hi,

Yes, sorry it’s the collections page on mobile. I would like to reduce the white gap in between them so the images can be bigger.

Thanks for your help!

4

Hi @Karla8

This is Henry from PageFly - Landing Page Builder App

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 only screen and (max-width: 767px){

.card.card–standard.card–media {

margin-right: 8px !important;

}}

Hope that my solution works for you.

Best regards,

Henry | PageFly

5

Hi Henry,

Unfortunately, it does not work :disappointed_face:

6

I was checking my code again, and then I saw I had a similar code already on top of my page ! so I decreased the px and it works !

Thanks a lot ! have a great day !

7

Yeahhh! You are welcome @Karla8 :blush: