Make Slideshow Dots Closer Together Dawn Theme

[SearchGhost1738]

Hello,

I need some help moving my slideshow dots closer together. I've attached a reference image on how I'd like it to look. I'd like them to be closer together and changed to white. I'm fine editing the CSS. https://shop.coolcookies.com/

Thank you

[PageFly-Lucas · Accepted solution]

Hi @SearchGhost1738 

This is Lucas from PageFly - Landing Page Builder App

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

.slider-counter__link {

    padding: 0.2rem !important;

}

Hope that my solution works for you.

Best regards,

Lucas| PageFly

[PageFly-Lucas · Accepted solution]

Hi @SearchGhost1738 

This is Lucas from PageFly - Landing Page Builder App

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

.slider-counter__link {

    padding: 0.2rem !important;

}

Hope that my solution works for you.

Best regards,

Lucas| PageFly

[SearchGhost1738]

This worked but the dots are a little bit too low. I'm using custom liquid to place the dots on the slideshow. This is what what I'm using:

<style>
  @media screen and (min-width: 749px){
    .slideshow__controls {
        position: absolute;
        bottom: 0;
        z-index: 9;
        left: 50%;
        transform: translateX(-50%);
        border: none;
    }
  }
</style>

 Would any of this fix it?

[PageFly-Lucas · Accepted solution]

You can try with this code:

.slideshow__controls.slideshow__controls--top.slider-buttons.no-js-hidden {

      margin-bottom: 20px;

}

[Made4uo-Ribe]

Hi @SearchGhost1738 , 

I understand that you want to moving my slideshow dots closer together.

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "theme.scss.liquid, styles.scss.liquid or base.css" file, depending on which file your theme uses to store its CSS styles.
4. At the bottom of the file, add the following CSS code:
5. And Save.

.slider-counter__link {
    padding: 0.5rem;
    padding-bottom: 1rem;
}

Result:

I hope it help.