Streaming live at 10am (PST)

Responsive Slider Nav dots

Is there a way to auto-size the slider nav dots according to the browser width? Right now I’m assigning different font sizes for each breakpoint but I would like them to shrink automatically.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Did you try a responsive font size like ‘em’? For your slider navigation, I’d probably do 0.75em.

You can use VW for the text size, (on the slider nav element) this will increase the dots size automatically depending on the screen exact size.
You can then set a fix text size in px for smaller screen sizes.

@parker @Eli11 Thanks! Is there any way to left-align that slider dot box?

Set the slider nav to flex, left aligned.

@Eli11 It seems to squish the dots when there are too many in smaller breakpoint widths (See image). Any workaround?

03%20PM

Try the “Wrap children” in the flex options on the slider nav

1 Like