Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

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


ClareJ

Recommended Posts

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;}
}

 

Edited by ClareJ
mistake made
Link to post
  • 3 weeks later...
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

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

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?

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, 360 Degree Photo block, Seperator Block (SVG Shape divider for sections)
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...