Index gallery page on mobile

Hi there!

I am working with the Brine template, with an Indexpage as a homepage, where I have some Index-galleries. I'm looking for a way to NOT stack my gallery-photos as displayed on mobile. There are too many images for that, too much scrolling... I would like to display two photos next to eachother in the grid on mobile (therefore two colums). I have tried different versions of CSS-codes already, but non of them seem to work. I really hope someone can help me out! Thanks!!

Cheers, 

Sanne

Can you share link to index gallery page?

www.sjoerdbracke.com/gallery-travelphotography

https://seabass-kazoo-7xdc.squarespace.com/config/pages/5edcb0aea357687217b1d995

It is a part of www.sjoerdbracke.com/home

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
  body#collection-5edcb0aea357687217b1d995 {
    .slides {
        height: auto !important;
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        grid-column-gap: 10px;
    }
    .slide {
        position: static !important;
        width: auto !important;
        height: auto !important;
    }
  }
}

Thanks! It doesn't seem to work though... If i view the site on my mobile, the pictures of the index-galleries on the homepage are still displayed as stacked (one picture) in stead of two columns!

Your problem on home page

or on gallery travelphotography page?

My homepage is een indexpage with different "sub-pages", including the 'gallery travelphotography' page and the 'gallery commercial' page. I want these subpages to display on the homepage as two colums. Sorry, it is a bit confusing!