Product gallery images stacked on mobile - I want 3 or 4 products on each row

Site URL: http://www.lunaanneprints.squarespace.com

I have been looking through the forums trying to find a code to use so I am able to have my product images side by side on mobile view instead of stacked and I can not seem to find one that works.

I am still in the process of finishing my website before I publish it, I am not sure if that has anything to do with it? My URL is lunaanneprints.squarespace.com and my password is Liverpool

Please could someone help a lost soul - my user experience is super important and most of my customers will be using their mobiles. 

I have no idea how to code, but I have tried these and all don't seem to work;

1.

/* Mobile 2 columns */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1604951950007_46430+.row>.span-3 {
    width: 50% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1604951950007_46430+.row>.span-3:nth-child(2n+1) {
    clear: left !important;
}
div#block-yui_3_17_2_1_1604951950007_46430+.row>.span-3 * {font-size: 20px !important;}
}

2.

/* Best sellers 3 columns mobile */
@media screen and (max-width:767px) {
div#page-section-5fdc9ce76ba1be148e86d3d8 .span-9 .span-3 {
    width: 33.33% !important;
    float: left !important;
}
}

3.

/* order font size mobile */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1612529510512_12593+.row h3 {
    font-size: 22px;
}
}

4.
@media only screen and (max-width: 600px) {
        .sqs-gallery-design-autogrid-slide {
          width: 49% !important;
          float: left;
          clear: inherit !important;
          margin-left: 1%;
        }
}

5.
@media only screen and (max-width: 768px) {
    #block-yui_3_17_2_1_1611892954947_10780 + .row .sqs-col-3 {
      width: 50% !important;
      float: left !important;
    }
}

:not(.sqs-edit-mode) #block-yui_3_17_2_1_1611892954947_10780 {
  display: none;
}

6.

@media only screen and (max-width: 768px) {
    #block-yui_3_17_2_1_1611892954947_10780 + .row .sqs-col-3 {
      width: 50% !important;
      float: left !important;
    }
 #block-yui_3_17_2_1_1611892954947_10780 + .row .sqs-col-3:nth-child(2n+1) {clear: left !important;}
}

On 2/22/2021 at 9:11 PM, ClareJ said:

Site URL: http://www.lunaanneprints.squarespace.com

I have been looking through the forums trying to find a code to use so I am able to have my product images side by side on mobile view instead of stacked and I can not seem to find one that works.

I am still in the process of finishing my website before I publish it, I am not sure if that has anything to do with it? My URL is lunaanneprints.squarespace.com and my password is Liverpool

Please could someone help a lost soul - my user experience is super important and most of my customers will be using their mobiles. 

I have no idea how to code, but I have tried these and all don't seem to work;

1.

/* Mobile 2 columns */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1604951950007_46430+.row>.span-3 {
    width: 50% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1604951950007_46430+.row>.span-3:nth-child(2n+1) {
    clear: left !important;
}
div#block-yui_3_17_2_1_1604951950007_46430+.row>.span-3 * {font-size: 20px !important;}
}

2.

/* Best sellers 3 columns mobile */
@media screen and (max-width:767px) {
div#page-section-5fdc9ce76ba1be148e86d3d8 .span-9 .span-3 {
    width: 33.33% !important;
    float: left !important;
}
}

3.

/* order font size mobile */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1612529510512_12593+.row h3 {
    font-size: 22px;
}
}

4.
@media only screen and (max-width: 600px) {
        .sqs-gallery-design-autogrid-slide {
          width: 49% !important;
          float: left;
          clear: inherit !important;
          margin-left: 1%;
        }
}

5.
@media only screen and (max-width: 768px) {
    #block-yui_3_17_2_1_1611892954947_10780 + .row .sqs-col-3 {
      width: 50% !important;
      float: left !important;
    }
}

:not(.sqs-edit-mode) #block-yui_3_17_2_1_1611892954947_10780 {
  display: none;
}

6.

@media only screen and (max-width: 768px) {
    #block-yui_3_17_2_1_1611892954947_10780 + .row .sqs-col-3 {
      width: 50% !important;
      float: left !important;
    }
 #block-yui_3_17_2_1_1611892954947_10780 + .row .sqs-col-3:nth-child(2n+1) {clear: left !important;}
}

 

Hi did you manage to solve the issue?