Two columns on my shop all page on website

Site URL: http://www.skinnypiginteriors.co.uk

This is a similar question asked by others but I don't know if i need code specifically for my site or not (i tried using the code provided to others but it didn't work), and if i need to change it depending on the page i want to alter.

I would like all my category product pages to show as two columns (for example shop all) rather than one as i have 100's of products people have to scroll through.

Could someone advise what I need to do please?

Web is www.skinnypiginteriors.co.uk

Thank you

Hey @HannahAR I see You have 4 columns on Shop All page https://www.skinnypiginteriors.co.uk/shop-all . Did You get it?

No, that's on my desktop view. I'm still struggling to get 2 columns on my mobile view. Do you know how please?

Try to add this code on Custom CSS:

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

Thank you!