Search code examples
cssflipclock

Scale Up Flipclock.js

I've got a site which uses flipclock.js. I've been going through a bit of trouble making it larger, so it takes up more space on the page.

Does anyone know how to scale it up, or make it larger?

Solution

  • The clock adapts based on the font-size. If you change the font size in the codepen you provided in the comments ( https://codepen.io/sarus/pen/xjKEZq?editors=0100 ) the whole clock scales up/down. You can also adjust border-radius, gap and the dot size individually.

    Basically, the first 4 SASS variables are intended to be changed:

    // 
// ------------------------- FlipClock
// 
$clock-flip-font-size: 200px
$clock-flip-border-radius: 8px
$clock-digit-gap: 40px
$clock-dot-size: 20px