Jump to content

Remove random scrollbar on product page.

Recommended Posts

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?

scrollbar.JPG

Link to comment
  • 2 weeks later...
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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 by Solletix
Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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 by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 3 months later...
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.
 

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

 

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 🙏

Link to comment
  • 6 months later...

@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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 1 month later...
  • 1 year later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 11 months later...

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

image.thumb.png.1d9d05a63230380dde146917bbb307c6.png

 

Hope this helps!

 

Edited by STUDIOLAFA
Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.