Solved

Make Slideshow Dots Closer Together Dawn Theme

SearchGhost1738
Excursionist
17 0 6

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

Screenshot 2023-05-21 at 9.07.33 AM.pngScreenshot 2023-05-21 at 9.14.20 AM.png

Accepted Solutions (2)

PageFly-Lucas
Pathfinder
110 28 29

This is an 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

banned

View solution in original post

PageFly-Lucas
Pathfinder
110 28 29

This is an accepted solution.

You can try with this code:

.slideshow__controls.slideshow__controls--top.slider-buttons.no-js-hidden {
      margin-bottom20px;
}
PageFlyLucas_0-1684717208155.png

 

banned

View solution in original post

Replies 4 (4)

PageFly-Lucas
Pathfinder
110 28 29

This is an 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

banned
SearchGhost1738
Excursionist
17 0 6

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
Pathfinder
110 28 29

This is an accepted solution.

You can try with this code:

.slideshow__controls.slideshow__controls--top.slider-buttons.no-js-hidden {
      margin-bottom20px;
}
PageFlyLucas_0-1684717208155.png

 

banned

Made4uo-Ribe
Shopify Partner
6371 1529 1898

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:

Rose_Dim_0-1684689839883.png

I hope it help. 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.