Changing inventory display on phone view

hey guys,

having trouble changing the inventory display for phone view on my website. currently it displays 1 inventory item per row when looking from phone view, where as when looking from desktop view it displays 4 items per row. I would like to be able to change it so that the user sees 2 or 3 items (preferably 3) per row when looking at my inventory on a phone or mobile device. any ideas how to do this? this has been driving me crazaaay

thanks heaps!

dario. 

Can you share your website URL and the page you want this on?

this is website url, but problem only occurs from phone view so ive attached a screenshot aswell!

thanks man!

https://www.precioustimeopals.com/shop

2 hours ago, dmessi said:

this is website url, but problem only occurs from phone view so ive attached a screenshot aswell!

thanks man!

https://www.precioustimeopals.com/shop

Remove your code & use this new code

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

If you want 2 columns, just change number 3 to 2