Remove random scrollbar on product page.

Yesterday when I was editing the product page (which is ludicrous in how limited it is btw). Today when I resumed editing a goddamned scroll bar was there all of a sudden, and I can't find a way to remove it. Image attached for clarity.

Is this a bug or is it yet another way for SS to cajole me out of more money for the custom CSS feature?

Can you share link to product page? We can check easier.

I also noticed this ugly little bar appear and it's only on Chrome for me. I contacted Squarespace but they didn't have fix, saying they couldn't replicate it on their end and it must be a browser problem, so I asked about custom code and was referred to the forum...

On 9/4/2020 at 5:44 AM, jdgcreates said:

I also noticed this ugly little bar appear and it's only on Chrome for me. I contacted Squarespace but they didn't have fix, saying they couldn't replicate it on their end and it must be a browser problem, so I asked about custom code and was referred to the forum...

Can you share link to product page? We can check custom code easier.

did anyone have any luck on getting this bar removed? i noticed it happens regardless if the variant thumbnails are to the left or below the main product image

13 hours ago, Solletix said:

did anyone have any luck on getting this bar removed? i noticed it happens regardless if the variant thumbnails are to the left or below the main product image

If you share link to product page, we can give the solution

On 9/12/2020 at 3:49 AM, tuanphan said:

If you share link to product page, we can give the solution

thanks @tuanphan https://solletix.com/store/womens-raceback

pw: Solletix2019!

Would love a fix for this is as well! Also how to make thumbnail images in product detail image gallery larger??

On 9/14/2020 at 11:09 PM, Solletix said:

thanks @tuanphan https://solletix.com/store/womens-raceback

pw: Solletix2019!

Add to Home > Design > Custom CSS

.ProductItem-gallery-thumbnails {
    overflow: hidden;
}

On 9/15/2020 at 1:36 AM, gandc said:

Would love a fix for this is as well! Also how to make thumbnail images in product detail image gallery larger??

Have you solved it yet?

On 9/19/2020 at 10:34 AM, tuanphan said:

Add to Home > Design > Custom CSS

.ProductItem-gallery-thumbnails {
    overflow: hidden;
}

 

Have you solved it yet?

unfortunately that didn't remove the scroll bar. i'm open to just removing those variant thumbnails in general as long as it doesn't effect other functionality. I tried the below in Design > Custom CSS and it did not work.

.ProductItem-gallery-thumbnails {
    display: none;
}

Edited September 21, 20204 yr by Solletix

On 9/21/2020 at 4:53 AM, Solletix said:

unfortunately that didn't remove the scroll bar. i'm open to just removing those variant thumbnails in general as long as it doesn't effect other functionality. I tried the below in Design > Custom CSS and it did not work.

.ProductItem-gallery-thumbnails {
    display: none;
}

I don't see scrollbar here. Do you stilll need help on this?

I'm not seeing scroll bars in unexpected places. I'm on macOS using Chrome. Please post a image of the https://solletix.com/store/womens-raceback page with these scroll bars.

Edited September 25, 20204 yr by creedon

Have the same issue 

Al-Hama — Agate&Quartz - of Morocco (agateandquartz.com)

password for the site: 4310

would be happy if anyone got a solution for it 🙂

12 hours ago, Karimo said:

Have the same issue 

Al-Hama — Agate&Quartz - of Morocco (agateandquartz.com)

password for the site: 4310

would be happy if anyone got a solution for it

Add the following to Design > Custom CSS.

.tweak-product-basic-item-gallery-design-slideshow.tweak-product-basic-item-thumbnail-placement-below .ProductItem-gallery-thumbnails {

  overflow-x: auto;
  
  }

This is for a v7.1 site.

Not sure why SS has that set to scroll instead of auto.

Let us know how it goes.
 

5 hours ago, creedon said:

Add the following to Design > Custom CSS.

.tweak-product-basic-item-gallery-design-slideshow.tweak-product-basic-item-thumbnail-placement-below .ProductItem-gallery-thumbnails {

  overflow-x: auto;
  
  }

This is for a v7.1 site.

Not sure why SS has that set to scroll instead of auto.

Let us know how it goes.
 

 it worked perfectly, Thank you so much 🙏

On 1/23/2021 at 3:54 AM, Karimo said:

 

 it worked perfectly, Thank you so much 🙏

Been digging and this posted helped resolve my issue as well, but is there a way to center the gallery images instead of having them aligned on the left?

@downtowndarrylbrown

Please post the URL for a product with a gallery on your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

On 1/23/2021 at 12:54 PM, Karimo said:

.tweak-product-basic-item-gallery-design-slideshow.tweak-product-basic-item-thumbnail-placement-below .ProductItem-gallery-thumbnails {

  overflow-x: auto;
  
  }

Hi, for me it doesn't work for some reason : 

https://www.trustintribe.com/store/p/ambigram-ring-trustintribe

I've tried to twist the problem by switching to carousel so far

Hi unfortunately, I also have the same problem and the solution above does not work:

https://spinach-iguana-3bsw.squarespace.com/

FYI, the only work around I found for now is to deactive all scroll bars using:

::-webkit-scrollbar {
  width: 0px; 
}

it is not ideal since it deactivate all scroll-bars of the entire website but it looks better.

17 hours ago, MrLEMARIE said:

FYI, the only work around I found for now is to deactive all scroll bars using:

::-webkit-scrollbar {
  width: 0px; 
}

it is not ideal since it deactivate all scroll-bars of the entire website but it looks better.

Can you remove the code? We can check it easier

12 hours ago, tuanphan said:

Can you remove the code? We can check it easier

Yes, sure. code removed

Idk if this was resolved but I ended up doing this for my product page and the scrollbar dissapears:

1. Navigate in the website editor to  Website>Website Tools>Custom CSS 
2. Insert the following code.
   
   /* This selects the scrollbar for all thumbnail galleries on the product page and hides them*/
   .ProductItem-gallery-thumbnails::-webkit-scrollbar {
       display: none;
   }
3. Save

Hope this helps!

Edited January 17, 20241 yr by STUDIOLAFA