Change dot color for carousel on mobile

Builder content link

What are you trying to accomplish

  • How do I change the dots under my carousel from black (current) to white? Under “Real People. Real Results.”
  • I’m struggling to remove the excess space between the carousel images and the dots below. How do I shrink that?

Hi @racheldbailey!

  1. To change the carousel dots you can use the below code.
.slick-dots li button:before{
       background-color: #fff;
.slick-dots li.slick-active button:before{
       background-color: #000;
  1. To remove space between carousel images and the dots add the below code and change the bottom value to -15px or so
    bottom: -25px;

1 Like

Hi! I’m tryin to change the size of the dots and when I use your code above,

slick-dots li button:before{ max-width: 8px; max-height: 8px; }
it’s returning a result where it looks like there are two dots for each button (see screenshot)
Screen Shot 2022-11-15 at 9.30.12 AM
How can I change the size of the dots?

Additionally, I’d like them to sit on top of/within the image bounds (see below), when i create a negative margin, it adjusts the bottom of the image container.

Hi @mrnda_darkroom,

Could you please page URL or builder content link?

@manish-sharma yes, see below:

Hi @mrnda_darkroom,

You can try using the below CSS code for resizing the carousel dots

.slick-dots li button:before{ 
    max-width: 8px; 
    max-height: 8px; 
    line-height: 8px !important;

And for positioning the dots within the image bounds instead of the negative margin, please try and use the CSS bottom property. e.g.

.slick-dots {
   bottom: 10px !important; // +ve value to push the dot up and -ve to push down

Let us know if you have any further questions or concerns. Thank you!

@manish-sharma Thanks! How do I adjust the space between the dots?