Make slider navigation dots smaller and closer together

  • Resolved EarthlingGirl

    (@stine-g)


    9 years, 7 months ago

    Hi all,

    I’m working on a child theme for Twenty Fourteen. I have made the navigation dots (.slider-control-paging) in the featured content slider round instead of square with CSS.
    Here’s my site: https://helbredspilot.dk/.

    Now I really would like to make the dots a bit smaller and have them closer together (reduce the space between them).

    Does anyone have an idea how I might do that with CSS?

    Thanks in advance! ??

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi,

    Under this css selector change value for “height” and “width”. Look at 2969 line in css file. For example change value from 12 to 9 and you will get nice small dots.

    .slider-control-paging a::before {
    background-color: #4d4d4d;
    content: “”;
    height: 12px;
    left: 10px;
    position: absolute;
    top: 16px;
    width: 12px;

    To reduce space change number under “width”. Look at 4069 line in css file.

    .slider-control-paging a {
    height: 24px;
    width: 24px;
    }

    Thread Starter EarthlingGirl

    (@stine-g)

    Hi Niki,

    Thank you SO much for your help and expertise – this was exactly what I needed!
    Thank you, thank you, thank you! ??

    Kind regards,
    EG

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Make slider navigation dots smaller and closer together’ is closed to new replies.