Clock sizing

[ahychu84]

Is there an easy way to scale the clock smaller or larger other than manipulating the CSS?

[anjum121]

Hey

This might help, its sass version for small clock.

`

      .flip-clock-wrapper ul li a div div.inn{
           font-size: 2.5rem;
        }
       .flip-clock-wrapper ul li a div{
         font-size: 3rem;
           }
       .flip-clock-wrapper ul {
         width: 2.4rem;
         height: 3rem;
         font-size: 3rem;
       }

       .flip-clock-wrapper ul li {
         line-height: 3rem;
       }

       /* Adjust the position of the top's dot */
       .flip-clock-dot.top {
         top: 1.2rem;
       }
       /* Adjust the position of the bottom's dot */
       .flip-clock-dot.bottom {
         bottom: 0;
         top: 2.1rem;
       }

       .flip-clock-dot{
         width: .5rem;
         height: .5rem;
       }

       .flip-clock-divider {
         width: 1rem;
         height: 5rem;
       }
       .flip-clock-divider .flip-clock-label{
         right: -4.5rem;
     }

    .flip-clock-divider.minutes .flip-clock-label {
       right: -4.5rem;
     }
     .flip-clock-divider.seconds .flip-clock-label {
       right: -4.1rem;
     }

`

[chupzzz]

Easy way of changing size. Just add this CSS:

.flip-clock-wrapper .flip {
height: Zpx;
width: Ypx;
}
.flip-clock-wrapper .flip a div {
height: 49%;
}
.flip-clock-wrapper .flip .inn {
font-size: xx;
line-height: yy;
}

Works for me.

[EbiPenMan]

see this comment https://github.com/objectivehtml/FlipClock/issues/296#issuecomment-275895997

[GuerrillaCoder]

I just do this and it works fine:

#clock-wrapper{
  transform: scale(0.5);
}

[alis-design]

this will still create problem in iPhone/Safari you would need to add custom font-size declarations

.flip-clock-wrapper ul li a div div.inn, .flip-clock-small-wrapper ul li a div div.inn {
        font-size:40%;

            // Small devices (landscape phones, 576px and up)
            @media (min-width: 375px) {
                font-size: 50%;
            }
            // Small devices (landscape phones, 576px and up)
            @media (min-width: 576px) {
                font-size: 70%;
            }
            // Medium devices (tablets, 768px and up)
            @media (min-width: 768px) {
                font-size: 100%;
            }
        }
        .flip-clock-wrapper .flip-clock-meridium a,
        .flip-clock-small-wrapper .flip-clock-meridium a {
            color: #323434;
        }

        .clock-builder-output {

            zoom: 0.4;
            -moz-transform: scale(0.4);

            // Small devices (landscape phones, 576px and up)
            @media (min-width: 375px) {
                zoom: 0.5;
                -moz-transform: scale(0.5);
            }

            // Small devices (landscape phones, 576px and up)
            @media (min-width: 576px) {
                zoom: 0.7;
                -moz-transform: scale(0.7);
            }

            // Medium devices (tablets, 768px and up)
            @media (min-width: 768px) {
                zoom: 1;
                -moz-transform: scale(1);
            }

            // Large devices (desktops, 992px and up)
            @media (min-width: 992px) {}

            // Extra large devices (large desktops, 1200px and up)
            @media (min-width: 1200px) {}
        }

[objectivehtml]

This code has been rewritten entirely in the new version on the js-es6 branch. I would recommend checking out the new branch. The examples have mostly been updated so they should work. I'm interested to know if this issue is still a problem on the new version. I haven't had time to make a proper responsive clock example, but I will soon.