forcing 3 column grid on mobile

Hi folks.  I have tried every solution to this I have found on this forum but cannot get it to work.  I would like a simple grid of logos to be 3 columns on mobile.  Any help would be most appreciated. @tuanphan I know you have helped some folks in the past so cheekily tagging you.  Hope that's ok.

Site is:  gatenbysconsulting.squarespace.com

P/w: nikki

Thank you in advance!

Try this Custom CSS:

@media screen and (max-width: 767px) {
  .sqs-gallery-design-grid-slide {
    width: 33% !important;
    clear: none !important;
  }
}

Thank you @Ziggy! That worked immediately when I view on an actual mobile phone.  But it has left a huge gap under the grid now, which I can't see in 'preview' to amend spacing. Any advice on how to remove that?

The 3x grid isn't showing in the editor with mobile toggled?

Try refreshing the page or clearing your browser cache.

Afraid not.  I have seen a number of people experienced the same thing with viewing CSS amended columns on preview.  I have tried Safari, Chrome and Arc and cleared cache and it doesn't show. 

A video of the spacing issue on mobile is attached. 

Can you try editing the page in a small browser window, small enough that you see the 8-column mobile grid? Then adjust the block height.

That doesn't work I'm afraid.  See video below. 

I'm not sure why that's not working for you, I'd be happy to try and fix this for you if you can temporarily add me as an admin to the website.

Thanks @Ziggy - that's really kind of you. Can you send me a message or email wayne@waynefick.com with your email and I'll add you.

It already show fine to me