Trying to display products Into columns on mobile devices

Site URL: https://hoplitehobbyist.squarespace.com/config/design/custom-css

Hi everyone hopefully you can help, I'm really trying to reduce the size of our images on our mobile screen. Lots of similar companies have their products displayed i n two columns on mobile devices. I'm very novice when it comes to web development and to be honest at the beginning of our journey I don't have copious amounts of money to spend to hire an expert. I have spoken with square space customer services, who have told me that there is no specific way in the template design to do this. This seems rather silly as many people want this functionality. Is there anyone who can help me add this feature to my store, I like the look of my store on the desktop but I recognise many people will be looking at it on the mobile.

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.products.collection-content-wrapper .list-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
}
}

@tuanphan I just tried this on my site and it's not working, could you help? 

https://oarfish-aardvark-ycpl.squarespace.com/

Tina2020

18 hours ago, MiaMiaMia said:

@tuanphan I just tried this on my site and it's not working, could you help? 

https://oarfish-aardvark-ycpl.squarespace.com/

Tina2020

I see 2 columns here. Do you still need help?

Oh, I wasn't seeing it yesterday, sorry about that. How do I add padding between the columns? @tuanphan

@media screen and (max-width:767px) {
.products.collection-content-wrapper .list-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
	grid-column-gap: 10px;
}
}