Blank space in between product images mobile

[Karla8]

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

[zaczee]

Hi,

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

[Karla8]

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!

[PageFly-Henry · Accepted solution]

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

[Karla8]

Hi Henry,

Unfortunately, it does not work 😞

[Karla8]

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 !

[PageFly-Henry]

Yeahhh! You are welcome @Karla8 😊