LP1994 Posted April 10, 2022 Share Posted April 10, 2022 Site URL: https://cone-mouse-r3d2.squarespace.com/workpoints/test Hi, Hoping someone can help out with this problem. See attached screenshot - setting up product pages with a gallery & thumbnails below, but it seems when I add a few images, the thumbnail strip is too wide and causes the page to become not 'size responsive' and needing to horizontal scroll. Is there any way to fix this apart from removing images so there is less thumbnails, or reducing the size of the thumbnail image in the settings? (if I have 6-7 images in the gallery, in order to fit the thumbnail strip they would need to be too small and would look unusual) Would appreciate any help - if not, is there a gallery plugin that would work better in this case? https://cone-mouse-r3d2.squarespace.com/workpoints/test password to view is 1234 Link to comment
tuanphan Posted April 13, 2022 Share Posted April 13, 2022 Hi, Try adding to Design > Custom CSS html, body { overflow-x: hidden; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
hellothisisjeff Posted May 11, 2022 Share Posted May 11, 2022 Hi @LP1994, Not sure if you're still having trouble with this issue, but I ran into the same problem on a site I was working on and figured out this CSS fix... It is most definitely a Squarespace underlying issue with gallery blocks. The main culprit is some relative positioning on the .sqs-gallery-thumbnails div wrapper that should be absolutely positioned instead which would allow the thumbnail strip itself to be as long as needed without breaking the layout. Add this to your custom CSS and should do the trick: .sqs-gallery-design-strip { position: absolute; bottom: 0; transform: translateY(100%); overflow: hidden; width: calc(~'100% - 34px'); } .sqs-block-gallery { margin-bottom: 90px; } Note: if you've overridden the Squarespace default block padding of 17px, you'll want to update the "34px" part of the width calc to account for twice your custom-set padding. Hope this helps! DV2 1 Link to comment
DV2 Posted May 25, 2022 Share Posted May 25, 2022 On 5/11/2022 at 10:54 AM, hellothisisjeff said: Hi @LP1994, Not sure if you're still having trouble with this issue, but I ran into the same problem on a site I was working on and figured out this CSS fix... It is most definitely a Squarespace underlying issue with gallery blocks. The main culprit is some relative positioning on the .sqs-gallery-thumbnails div wrapper that should be absolutely positioned instead which would allow the thumbnail strip itself to be as long as needed without breaking the layout. Add this to your custom CSS and should do the trick: .sqs-gallery-design-strip { position: absolute; bottom: 0; transform: translateY(100%); overflow: hidden; width: calc(~'100% - 34px'); } .sqs-block-gallery { margin-bottom: 90px; } Note: if you've overridden the Squarespace default block padding of 17px, you'll want to update the "34px" part of the width calc to account for twice your custom-set padding. Hope this helps! Thanks Jeff! I just ran into this issue and wanted to see if it was a know problem or the result of something weird I had done. 🙂 Sure seems like a bug! BTW, if you increase the thumbnail size, you'll need to increase the .sqs-block-gallery {margin-bottom: } value. Link to comment
betyonfire Posted June 7, 2022 Share Posted June 7, 2022 I just had the same issue on a page with multiple galleries and was doubtful that I was going to get a quick resolution but am super happy to find this fix. Thanks!! Link to comment
raisincosplay Posted November 15 Share Posted November 15 On 5/11/2022 at 10:54 AM, hellothisisjeff said: Hi @LP1994, Not sure if you're still having trouble with this issue, but I ran into the same problem on a site I was working on and figured out this CSS fix... It is most definitely a Squarespace underlying issue with gallery blocks. The main culprit is some relative positioning on the .sqs-gallery-thumbnails div wrapper that should be absolutely positioned instead which would allow the thumbnail strip itself to be as long as needed without breaking the layout. Add this to your custom CSS and should do the trick: .sqs-gallery-design-strip { position: absolute; bottom: 0; transform: translateY(100%); overflow: hidden; width: calc(~'100% - 34px'); } .sqs-block-gallery { margin-bottom: 90px; } Note: if you've overridden the Squarespace default block padding of 17px, you'll want to update the "34px" part of the width calc to account for twice your custom-set padding. Hope this helps! Hey, Jeff. I tried your fix, but it didn't seem to work for me. I detailed my issues here: Any chance you can take a look? 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