Image grid on desktop and mobile

Hi, I've just recently developed a site on Squarespace and was wondering if there was a way to add a custom code which allowed for there to be 4 images of products going across on the desktop version, and 2 on the mobile version. At the moment I have a code which is allowing 2 products per line on the product page, but for the desktop site, this is too big. However, for the mobile site this is fine

This is the code I am using at the moment:

<style>
  /* Product 2 columns mobile */
@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;
}

Hi,

What is your site url?

www.redribbonfashion.co.uk

On 2/15/2023 at 3:58 PM, reddribbon1 said:

www.redribbonfashion.co.uk

Hi,

On this page & other category page? https://www.redribbonfashion.co.uk/readytowear/new-arrivals?tag=New Arrivals

Chane to 4 images/row (Desktop) and 2 on mobile?

Hiya, 

5 hours ago, tuanphan said:

Hi,

On this page & other category page? https://www.redribbonfashion.co.uk/readytowear/new-arrivals?tag=New Arrivals

Chane to 4 images/row (Desktop) and 2 on mobile?

Yes - would like to do it on all pages ideally. The images are too large for desktop view but just right for mobile view

That worked! Thank you very much