Gallery with thumbnails causing scaling/responsive issues due to width

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

Hi,

Try adding to Design > Custom CSS
 

html, body {
    overflow-x: hidden;
}

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!

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.

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!!

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?