ClareJ Posted February 22, 2021 Share Posted February 22, 2021 (edited) 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 February 22, 2021 by ClareJ mistake made Beyondspace 1 Link to comment
Beyondspace Posted March 10, 2021 Share Posted March 10, 2021 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 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, Delivery Date Picker, Lightbox Studio pluginIf 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 comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment