Blog row height is bigger than column width and I want it to be the same

Hello there

Please could someone help me out with the code to make my mobile blog page look more like this does on mobile:

https://likeshop.me/kinshippets

The attached screenshot shows where I have currently got to. There's a wider row gap and I want it to match the column gap. I also want the blog to be flush with the edge of the screen, again like the website above. 

My site is here:

https://maroon-potato-a9jf.squarespace.com/

pw: ploof

Thanks

Tara

You can use this code to Website Tools > Custom CSS

@media screen and (max-width:767px) {
article.blog-basic-grid--container.entry.blog-item.is-loaded {
    margin-bottom: 0px !important;
}
}

Thanks Tuanphan, the blog posts look great now but the footer has extended (see attached screenshot). Do you know how to fix this? It might be some of the code I used originally...

Also is there a way to make the blog on mobile full width? So the three columns go to the edge of the page. 

Thank you. 

Page height is too short, so space will appear. You can use this code to add space under 4 items, so footer space won't appear

Or you can add more blog items to cover height of screen, it will fix problem.

To make fullwidth, use this CSS code

@media screen and (max-width:767px) {
.blog-basic-grid.collection-content-wrapper {
    padding: 0px !important;
}
}

Hi Tuanphan

Ok, last question! It now mostly looks how I want now but the footer space is still there. 

Can you give me code to fix this please? 

Thank you