Logo grid display problems on mobile

Site URL: https://cnicholson.ca/

Squarespacians, I'm stuck. I know this has been asked before, I know this has been done successfully by so, so many, but I'm sorry, but I just don't quite get it. Could someone walk me through it... slowly? 

I'm trying to achieve the glorious grid wall. A grid of logos that I can easily add to, that displays all at the same small size (ideally about 6 logos across), and, IMPORTANTLY, on mobile, displays in at least 2-3 columns. 

I'm on the new squarespace system.

I've tried using the logo wall component, and it's OKAYish, but looks terrible on mobile - blows up each logo big in a single col.

I've tried now to use an image gallery, and it's also OKAYish, depending on how your screen is sized, and, again, still a big logo in a single col on mobile.

I'm clearly missing a key step. What is it?

This print dinosaur would be ever-so-grateful for your help, 

C

(Ideally it looks like the attached - my site - in browser, and like how Matthew Portch has done it for his Squarespace site in mobile, also attached.) 

If you use Gallery Grid, we can give code to set 2-3 items/row on mobile

Tuanphan, I had it set to the wrong kind of grid, it needed to be "simple" - I think I get it now. If there's a way to do three cols, that would be fab. But this is a much better place I'm in, thanks so much for your help!

On 11/12/2020 at 11:43 PM, cnicholson said:

Tuanphan, I had it set to the wrong kind of grid, it needed to be "simple" - I think I get it now. If there's a way to do three cols, that would be fab. But this is a much better place I'm in, thanks so much for your help!

 

It seems you solved this?

I see on tablet, FB/Instagram - Line is overlap.

You can add this to Design > Custom CSS to solve

@media screen and (max-width:991px) and (min-width:768px) {
div#block-183b0a390b9c3a8a4625 {
    padding-top: 10px;
}
}