如何更改TimeCircles的高度和宽度？

Question

How can I change the height and width of the circles, from the TimeCircles Javascript plugin?

The circles, without any code in css, are big and nice.

I tried to make them smaller, using css, but it doesn't work if i just add:

#counter {
width:200px;
height:125px;
color:#444444;
margin:0 auto;
} 

How can I make them smaller? What is the right code for them?

How can I make the circles responsive? If I make my screen smaller, they remain the same.

I am using Bootstrap 3.1.1.

Answer 1

If you're still stuck with this, I hope this will help:

First of, the CSS you posted show work fine (assuming that that CSS exists before the TimeCircles are created).

As for making them responsive; you can force TimeCircles to rebuild itself:

$("#Counter").TimeCircles().rebuild();

In this process, TimeCircles rebuilds itself in with the appropriate dimensions.

If you want it to resize it self every time the screen resizes, you can put that code inside:

$(window).resize(function(){
   // resize ....
});