/

I'm using the default clockface, all I want to do is roughtly resize by 1/3 but for whatever reason it isn't resizing as I expect

In flipclock css I changed the following

.flip-clock-wrapper ul {
position: relative;
float: left;
margin: 5px;
width: 20px;
height: 30px;
font-size: 27px;
font-weight: bold;
line-height: 29px;
border-radius: 6px;
background: #000;
}

but the width of each ul is is 40px;

If anyone can point me in the right direction that would be great..

http://flipclockjs.com/

I'm using the default clockface, all I want to do is roughtly resize by 1/3 but for whatever reason it isn't resizing as I expect

In flipclock css I changed the following

.flip-clock-wrapper ul {
position: relative;
float: left;
margin: 5px;
width: 20px;
height: 30px;
font-size: 27px;
font-weight: bold;
line-height: 29px;
border-radius: 6px;
background: #000;
}

but the width of each ul is is 40px;

If anyone can point me in the right direction that would be great..

• javascript
• jquery

• I believe your CSS is overridden by the default plugin CSS.. Try to look for how to use option classes, which in the documentation says, (object) This is an object of CSS classes to use to append to DOM objects. – Bla... Commented Jul 25, 2014 at 1:24
• I'm editing the default css. When inspected it shows the change as applied, but when computed it is different – Barry Hamilton Commented Jul 25, 2014 at 1:33

5 Answers 5

I leave a comment for upcoming questionnaires

To fix size issue in FlipClock, simply add following css to your main clock container

.timer {
    zoom: 0.5;
    -moz-transform: scale(0.5);
}

above line will reduce size by 1/2, if you want smaller size you can use 0.3 or whatever

Flipclockjs is built on many fixed properties. You must adjust more than that. An example I use with responsive method to override them:

@media screen and (max-width: 819px) {

    /*.home-featured .clock { margin: 0 auto; display: block; width: 322px; }*/
    .home-featured h1 { font-size: 1.6em; }

    .flip-clock-wrapper ul { height: 50px; line-height: 50px; margin: 3px; }
    .flip-clock-wrapper ul li a div.up:after { top: 24px; }
    .flip-clock-divider { height: 50px; }
    .flip-clock-dot { height: 6px; width: 6px; left: 7px;}
    .flip-clock-dot.top { top: 17px; }
    .flip-clock-dot.bottom { bottom: 8px; }

    .flip-clock-divider .flip-clock-label { font-size: 16px; }
    .flip-clock-divider.days .flip-clock-label { right: -76px; }
    .flip-clock-divider.hours .flip-clock-label { right: -70px; }
    .flip-clock-divider.minutes .flip-clock-label { right: -64px; }
    .flip-clock-divider.seconds .flip-clock-label { right: -70px; }

    .flip-clock-wrapper ul { width: 37px; }
    .flip-clock-wrapper ul li a div div.inn { font-size: 38px; }

    /* Korekcja położenia pól zegara załamanych do nowej linii */
    .flip-clock-wrapper ul { margin-bottom: 35px; }
    .flip-clock-wrapper { margin-bottom: -35px; }
}

.flip-clock-divider.minutes { clear: none;}

@media screen and (max-width: 550px) {

    .flip-clock-divider.minutes { clear: left;} /* break clock at minutes */

}

It been some time since this was active but I've bumped into this lib and I've decided I'll give it a try. Things have been working out alright for now. This is a solution adapted from one of the repo's closed issue (unsolved). It seems that the dev's promised a new API but that was more than 1 year ago.

It's not perfect as there are some issues when setting $clock-flip-font-size: 120px. Also, when minutes are being displayed as 3 digits, the "Minutes" text is not centered.

Here is the codepen: https://codepen.io/jimasun/pen/PzAqVw/

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

$clock-height: ($clock-flip-font-size * 1.2)
$clock-flip-width: ($clock-flip-font-size * 0.8)
$clock-flip-margin: ($clock-digit-gap / 2)
$clock-flip-section-width: (2 * ($clock-flip-width + 2 * $clock-flip-margin))

$clock-flip-bg: #607D8B
$clock-flip-shadow: 0 2px 5px rgba(0, 0, 0, 0.7)
$clock-flip-font-color: #F44336
$clock-flip-font-shadow: 0 1px 2px #000

.countdown-wrapper
  left: 50%
  position: absolute
  top: 50%
  transform: translate(-50%, -50%)

.countdown.flip-clock-wrapper ul
  height: $clock-height
  margin: 0 $clock-flip-margin
  width: $clock-flip-width
  box-shadow: $clock-flip-shadow

.countdown.flip-clock-wrapper ul li
  line-height: $clock-height

.countdown.flip-clock-wrapper ul li a div div.inn
  background-color: $clock-flip-bg
  color: $clock-flip-font-color
  font-size: $clock-flip-font-size
  text-shadow: $clock-flip-font-shadow

.countdown.flip-clock-wrapper ul,
.countdown.flip-clock-wrapper ul li a div div.inn
  border-radius: $clock-flip-border-radius

.countdown.flip-clock-wrapper ul li a div.down
  border-bottom-left-radius: $clock-flip-border-radius
  border-bottom-right-radius: $clock-flip-border-radius

.countdown.flip-clock-wrapper ul li a div.up:after
  top: (($clock-height / 2) - 1px)

.countdown .flip-clock-dot.top
  top: ($clock-height / 2 - $clock-flip-font-size * 0.2 - $clock-dot-size / 2)

.countdown .flip-clock-dot.bottom
  top: ($clock-height / 2 + $clock-flip-font-size * 0.2 - $clock-dot-size / 2)

.countdown .flip-clock-dot
  height: $clock-dot-size
  left: $clock-dot-size
  width: $clock-dot-size
  background: $clock-flip-bg

.countdown .flip-clock-divider
  height: $clock-height
  width: ($clock-dot-size * 3)
  &:first-child
    width: 0

.countdown .flip-clock-divider.seconds .flip-clock-label,
.countdown .flip-clock-divider.minutes .flip-clock-label
  right: -1 * $clock-flip-section-width

.countdown .flip-clock-divider .flip-clock-label
  color: $clock-flip-font-color
  font-size: $clock-flip-font-size / 4
  width: 2 * $clock-flip-width + 4 * $clock-flip-margin
// 
// ------------------------- FlipClock
// 

.flip-clock-wrapper ul {
        width: 20px;
        height: 25px;
        line-height: 25px;
        **padding-left: 20px;** //add this  to your wrapper ul  and youll be able to set the with  you can set it to zero and just adujst your width
    } 

Try this

.flip-clock-wrapper ul {
  ...
  width: 20px !important;
  ...
}