Reducing Spacing Between Collection Grid Rows

[Artphere]

Good morning,

I am trying to reduce spacing between the grid on my collection page. I am using the Flow theme. As you can see on this page there is too much whitespace between rows, and the first row has a larger gap than the subsequent ones. There is an egregious amount of space on mobile as seen in the image linked. I've tried whitespace controls (adding a hyphen) but can't seem to place them in the right spot and I don't know which element to change the padding on in the theme file.

Thanks in advance.

[ZestardTech]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >timber.scss.css and paste this at the bottom of the file:

img.lazyautosizes.lazyloaded {
top: 45%!important;
}

@media only screen and (max-width: 768px){
.grid__item {
margin-top: 0px!important;
}
}

[Artphere]

Thank you for your reply. I've added the code, however the grid remains filled with unnecessary whitespace. 

[g33kgirl · Accepted solution]

Hi @Artphere, try this (you may need to replace the previous code) :

.grid__item {
    margin: 0;
}

.collection-main-body .collection-main-body-inner div {
    margin-bottom: 0;
}

[Artphere]

Thank you, that's improved things substantially. I'll look at refining the spacing further but it's great for now!

[Pareshbhimani]

what is the file title?