display 3 products on mobile version with custom CSS

Site URL: https://www.namaomo.com/

Hi can anyone help with mobile/tablet display I want it to show 3 products in line thanks!

It's going to be a tight fit. Not sure if it looks good, but here we go.

/* 3 Column Product Grid */
@media only screen and (max-width:650px) {
.products.collection-content-wrapper .list-grid {
 
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
  
.products .grid-item {
width: 33%;
}
}

You can also use Grid (Design > Custom CSS). Number 3 means 3 columns

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