Need help to show two collection images per row mobile on Debut and increase gap below images

[MadsHolst]

Hello,

As my subject states, I have a hard time figuring out how to display two collection images per row on the collection page, on mobile, with Debut theme.
I have done some troubleshooting last night, but all the solutions I found didn't seem to work for me.

My website is https://ubehovlet.dk/collections

Another thing; how do I increase the gap between the footer and the collection row on desktop/tablet, because I have moved the collection-title below the image with .collection-grid-item__title{bottom: 0%; top: 102%;}, but now it touches the footer (it does not touch with 16:9 resolution) https://gyazo.com/a0683ec295a0be8fb440f060d63394a8 

Thanks in advance.

Best regards,
Mads

[UmairA]

Hey there @MadsHolst,

Add the following code to your theme.scss.liquid file

.template-list-collections .main-content {
padding-bottom: 40px !important;
}
@media only screen and (max-width: 480px) {
.grid__item {
    width: 50% !important;
}
}

Hope that helps. Let me know if you need help with anything else.

Cheers

[MadsHolst]

Hey, thanks, it did sort out the problems, however, I tried changing the size/resolution of the browser window, and there seems to be a gap between "mobile" and "desktop/tablet", which both work fine now (thanks to you), but this middle gap that I am talking about looks like this: https://gyazo.com/e415605565555a31c6cd051e83c242be

Is this something you can help with as well? Thanks a lot so far!

Best regards,
Mads