resizing flipclock.js not resizing as expected

Question

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..

Answer 1

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