Jump to content

Changing the colour of number of pictures in a product carousel

Recommended Posts

Site URL: https://chloeberland.com/

Hello everyone! 

I have a question and hope one of you can help me out.

When my site is in mobile, the arrows don't show on a product carousel (which I know is normal), but instead there's a white number of pictures on the upper right corner. My problem is that most of my pictures have white backgrounds, and it's impossible for mobile users to know that they can swipe to see other pictures. Do you happen to know what little chunk of custom CSS I can add to change that number's color? 

Thank you so much in advance and take care! 
Chloé 

I’ve included a pic so you all can know which number I’m talking about

product.PNG

Link to comment
  • Replies 2
  • Created
  • Last Reply

Hi @Chloeberland,

Try adding this within Design > Custom CSS:

.ProductItem-gallery-current-slide-indicator{color:black!important;}

With this expected result on mobile:

image.png.304476247e259886a60a9ae74a879f78.pngimage.png.b707800bc79629ffed7b6112b85f539f.png

Hope this helps!
-Tyler

The above post may be outdated. I’m no longer active in the Squarespace ecosystem, so I won’t see your direct messages. For better resources about web accessibility, I’ve documented some of my thoughts on my forum profile.

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.