All geek questions in one place

Make FlipClock.js Responsive

I am trying to make flipclock.js completely responsive and fail. Has anyone done this? If so, how do I get this to work? Thank you for your time. I tried to convert everything to percent, but it did not work as I expected. I am using twitter bootstrap with this plugin.

Here is my css for flipclock.js:

/* Get the bourbon mixin from http://bourbon.io */ /* Reset */ .countdown { postion:relative; width: 39%; } .flip-clock-wrapper { margin-left: 8% !important; max-width: 100%; font: normal .75em "Helvetica Neue", Helvetica, sans-serif; -webkit-user-select: none; } .flip-clock-wrapper * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .flip-clock-wrapper a { cursor: pointer; text-decoration: none; color: #ccc; } .flip-clock-wrapper a:hover { color: #fff; } .flip-clock-wrapper ul { list-style: none; } .flip-clock-wrapper.clearfix:before, .flip-clock-wrapper.clearfix:after { content: " "; display: table; } .flip-clock-wrapper.clearfix:after { clear: both; } .flip-clock-wrapper.clearfix { *zoom: 1; } .flip-clock-meridium { background: none !important; box-shadow: 0 0 0 !important; font-size: 300% !important; } .flip-clock-meridium a { color: #313333; } .flip-clock-wrapper { text-align: center; position: relative; width: 100%; margin: 100%; } .flip-clock-wrapper:before, .flip-clock-wrapper:after { content: " "; /* 1 */ display: table; /* 2 */ } .flip-clock-wrapper:after { clear: both; } /* Skeleton */ .flip-clock-wrapper ul { position: relative; float: left; margin: 0.7%; width: 8%; height: 1.1em; font-size: 7.2em; font-weight: bold; line-height: 7.2em; border-radius: 10%; background: #000; } .flip-clock-wrapper ul li { z-index: 1; position: absolute; left: 0; top: 0; width: 100%; height: 100%; line-height: 1em; text-decoration: none !important; } .flip-clock-wrapper ul li:first-child { z-index: 2; } .flip-clock-wrapper ul li a { display: block; height: 100%; -webkit-perspective: 100%; /*200px*/ -moz-perspective: 100%; perspective: 100%; margin: 0 !important; overflow: visible !important; cursor: default !important; } .flip-clock-wrapper ul li a div { z-index: 1; position: absolute; left: 0; width: 100%; height: 50%; font-size: 1em; overflow: hidden; outline: 1% solid transparent; } /*1px*/ .flip-clock-wrapper ul li a div .shadow { position: absolute; width: 100%; height: 100%; z-index: 2; } .flip-clock-wrapper ul li a div.up { -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; top: 0; } .flip-clock-wrapper ul li a div.up:after { content: ""; position: absolute; top: 1%;/*44px*/ left: 0; z-index: 5; width: 100%; height: .02em;/*3px*/ background-color: #000; background-color: rgba(0, 0, 0, 0.4); } .flip-clock-wrapper ul li a div.down { -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; -ms-transform-origin: 50% 0; -o-transform-origin: 50% 0; transform-origin: 50% 0; bottom: 0; border-bottom-left-radius: 1%;/*6px*/ border-bottom-right-radius: 1%;/*6px*/ } .flip-clock-wrapper ul li a div div.inn { position: absolute; left: 0; z-index: 1; width: 100%; height: 200%; color: #ccc; text-shadow: 0 20% 3% #000; /* 0 1px 2px #000*/ text-align: center; background-color: #333; border-radius: 9%; /* 0 1px 2px #000*/ font-size: 1em; } /* 70px*/ .flip-clock-wrapper ul li a div.up div.inn { top: 0; } .flip-clock-wrapper ul li a div.down div.inn { bottom: 0; } /* PLAY */ .flip-clock-wrapper ul.play li.flip-clock-before { z-index: 3; } .flip-clock-wrapper .flip { box-shadow: 0 2% 6% rgba(0, 0, 0, 0.7); } /* 0 2px 5px rgba(0, 0, 0, 0.7);*/ .flip-clock-wrapper ul.play li.flip-clock-active { -webkit-animation: asd 0.5s 0.5s linear both; -moz-animation: asd 0.5s 0.5s linear both; animation: asd 0.5s 0.5s linear both; z-index: 5; } .flip-clock-divider { float: left; display: inline-block; position: relative; width: 3%; /* 20px*/ height: 9em; } /* 100px*/ .flip-clock-divider:first-child { width: 0; } .flip-clock-dot { display: block; background: #323434; width: 50%;/* 10px*/ height: 1em; /* 10px*/ position: absolute; border-radius: 50%; box-shadow: 0 0 3% rgba(0, 0, 0, 0.5); left: 20%; } /* 5px*/ .flip-clock-divider .flip-clock-label { position: absolute; top: -1.5em; right: -7.5em; /* 86px*/ color: black; text-shadow: none; } .flip-clock-divider.minutes .flip-clock-label { right: -7.6em; } /* 88px*/ .flip-clock-divider.seconds .flip-clock-label { right: -7.9em; } /* 88px*/ .flip-clock-dot.top { top: 2.4em; } /* 30px*/ .flip-clock-dot.bottom { bottom: 2.4em; } /* 30px*/ @-webkit-keyframes asd { 0% { z-index: 2; } 20% { z-index: 4; } 100% { z-index: 4; } } @-moz-keyframes asd { 0% { z-index: 2; } 20% { z-index: 4; } 100% { z-index: 4; } } @-o-keyframes asd { 0% { z-index: 2; } 20% { z-index: 4; } 100% { z-index: 4; } } @keyframes asd { 0% { z-index: 2; } 20% { z-index: 4; } 100% { z-index: 4; } } .flip-clock-wrapper ul.play li.flip-clock-active .down { z-index: 2; -webkit-animation: turn 0.5s 0.5s linear both; -moz-animation: turn 0.5s 0.5s linear both; animation: turn 0.5s 0.5s linear both; } @-webkit-keyframes turn { 0% { -webkit-transform: rotateX(90deg); } 100% { -webkit-transform: rotateX(0deg); } } @-moz-keyframes turn { 0% { -moz-transform: rotateX(90deg); } 100% { -moz-transform: rotateX(0deg); } } @-o-keyframes turn { 0% { -o-transform: rotateX(90deg); } 100% { -o-transform: rotateX(0deg); } } @keyframes turn { 0% { transform: rotateX(90deg); } 100% { transform: rotateX(0deg); } } .flip-clock-wrapper ul.play li.flip-clock-before .up { z-index: 2; -webkit-animation: turn2 0.5s linear both; -moz-animation: turn2 0.5s linear both; animation: turn2 0.5s linear both; } @-webkit-keyframes turn2 { 0% { -webkit-transform: rotateX(0deg); } 100% { -webkit-transform: rotateX(-90deg); } } @-moz-keyframes turn2 { 0% { -moz-transform: rotateX(0deg); } 100% { -moz-transform: rotateX(-90deg); } } @-o-keyframes turn2 { 0% { -o-transform: rotateX(0deg); } 100% { -o-transform: rotateX(-90deg); } } @keyframes turn2 { 0% { transform: rotateX(0deg); } 100% { transform: rotateX(-90deg); } } .flip-clock-wrapper ul li.flip-clock-active { z-index: 3; } /* SHADOW */ .flip-clock-wrapper ul.play li.flip-clock-before .up .shadow { background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black)); background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%; background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%); background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%); background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%; -webkit-animation: show 0.5s linear both; -moz-animation: show 0.5s linear both; animation: show 0.5s linear both; } .flip-clock-wrapper ul.play li.flip-clock-active .up .shadow { background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black)); background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%; background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%); background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%); background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%; -webkit-animation: hide 0.5s 0.3s linear both; -moz-animation: hide 0.5s 0.3s linear both; animation: hide 0.5s 0.3s linear both; } /*DOWN*/ .flip-clock-wrapper ul.play li.flip-clock-before .down .shadow { background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1))); background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%; background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%); background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%); background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%; -webkit-animation: show 0.5s linear both; -moz-animation: show 0.5s linear both; animation: show 0.5s linear both; } .flip-clock-wrapper ul.play li.flip-clock-active .down .shadow { background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1))); background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%; background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%); background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%); background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%; -webkit-animation: hide 0.5s 0.3s linear both; -moz-animation: hide 0.5s 0.3s linear both; animation: hide 0.5s 0.2s linear both; } @-webkit-keyframes show { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes show { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes show { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes show { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes hide { 0% { opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes hide { 0% { opacity: 1; } 100% { opacity: 0; } } @-o-keyframes hide { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes hide { 0% { opacity: 1; } 100% { opacity: 0; } }
+5
source share
5 answers

Try this - you can control the size of the flip hours (see https://github.com/objectivehtml/FlipClock/issues/13 ) by creating a new class in css (it is better to work with sass):

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

Learning about this while working with sass, you can create a mixin to control scaling and -moz-transform to fit the screen.

For example, create a mixin file in sass that contains -

 // Responsive mixins =screen-xs @media all and (max-width: 320px) @content =screen-sm @media all and (max-width: 479px) @content =screen-md @media all and (max-width: 768px) @content =screen-lg @media all and (max-width: 900px) @content =screen-xl @media all and (max-width: 1300px) @content

Now just add it to your flipclock class to control scaling to fit the screen:

 .myflipclock zoom: 0.8 -moz-transform: scale(0.8) +screen-md zoom: 0.6 -moz-transform: scale(0.6) +screen-sm zoom: 0.45 -moz-transform: scale(0.45)

etc.

Hope this helps

+17
source

try this code and tell if this is normal:

 .flip-clock-wrapper ul { position: relative; float: left; margin: 5px; width: 15%; height: 100%; font-size: 82px; font-weight: bold; line-height: 110%; border-radius: 6px; background: #000; } .clock { width: 100%; height: 116px; margin: 0 auto; } .flip-clock-wrapper ul { position: relative; float: left; margin: 1%; width: 14%; height: 100%; font-size: 82px; font-weight: bold; line-height: 110%; border-radius: 6px; background: #000; } .flip-clock-divider { float: left; display: inline-block; position: relative; width: 1%; height: 100px; } .flip-clock-wrapper ul li a div.up:after { content: ""; position: absolute; top: 94%; left: 0; z-index: 5; width: 100%; height: 3px; background-color: #000; background-color: rgba(0, 0, 0, 0.4); } .flip-clock-wrapper ul li a div div.inn { position: absolute; left: 0; z-index: 1; width: 100%; height: 200%; color: #ccc; text-shadow: 0 1px 2px #000; text-align: center; background-color: #333; border-radius: 6px; font-size: 100%; } .flip-clock-wrapper ul { position: relative; float: left; margin: 1%; width: 14%; height: 100%; font-size: 82px; font-weight: bold; border-radius: 6px; background: #000; line-height: 110px; }
+1
source

Just FYI, we are working to make FlipClock.js inherently responsive and thematic without any hacks. Here you can check the details. The work is still ongoing, and you can always check here: https://github.com/objectivehtml/FlipClock/issues/161 .

+1
source

A good solution could be a combination of @uzb's answer and this. It was also posted here: resizing flipclock.js without resizing

Use these media queries as suggested by @uzb, but only configure these variables

 $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

This is a solution adapted from one of the closed question repos (not resolved). It seems that the developer promised a new API, but that was over 1 year ago.

This is not ideal as there are some problems setting up $clock-flip-font-size: 120px . Also, when minutes are displayed as 3 digits, the text “Minutes” is not centered .

Here is the code: 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 //
0
source

Try adding the following code at the end of the flipclock.css file:

 @media only screen and (max-width: 360px) { .clock { margin: 0 auto; display: block; width: 100%; } .flip-clock-wrapper ul { height: 35px; line-height: 35px; margin:2px; width: 24px !important;} .flip-clock-wrapper ul li a div.up:after { top: 16px; } .flip { width: 24px !important; } .flip-clock-divider { height: 35px; width: 10px !important;} .flip-clock-dot { height: 4px; width: 4px; left: 2px !important;} .flip-clock-dot.top { top: 12px; } .flip-clock-dot.bottom { bottom: 6px; } .flip-clock-divider .flip-clock-label { font-size: 11px !important; } .flip-clock-divider.days .flip-clock-label { right: -42px !important; } .flip-clock-divider.hours .flip-clock-label { right: -42px !important; } .flip-clock-divider.minutes .flip-clock-label { right: -48px !important; } .flip-clock-divider.seconds .flip-clock-label { right: -50px !important; } .flip-clock-wrapper ul li { line-height: 35px; } .flip-clock-wrapper ul { width: 24px !important; } .flip-clock-wrapper ul li a div div.inn { font-size: 21px; } } @media only screen and (min-width: 361px) and (max-width: 480px) { .clock { margin: 0 auto; display: block; width: 100%; } .flip-clock-wrapper ul { height: 35px; line-height: 35px; margin:2px; width: 30px !important;} .flip-clock-wrapper ul li a div.up:after { top: 16px; } .flip { width: 30px; } .flip-clock-divider { height: 35px; width: 15px;} .flip-clock-dot { height: 4px; width: 4px; left: 4px !important;} .flip-clock-dot.top { top: 12px; } .flip-clock-dot.bottom { bottom: 6px; } .flip-clock-divider .flip-clock-label { font-size: 11px !important; } .flip-clock-divider.days .flip-clock-label { right: -46px !important; } .flip-clock-divider.hours .flip-clock-label { right: -46px !important; } .flip-clock-divider.minutes .flip-clock-label { right: -55px !important; } .flip-clock-divider.seconds .flip-clock-label { right: -55px !important; } .flip-clock-wrapper ul li { line-height: 35px; } .flip-clock-wrapper ul { width: 26px; } .flip-clock-wrapper ul li a div div.inn { font-size: 21px; } } @media screen and (min-width: 481px) and (max-width: 767px) { .clock { margin: 0 auto; display: block; width: 100%; } .flip-clock-wrapper ul { height: 50px; line-height: 50px; } .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: 11px; } .flip-clock-divider.days .flip-clock-label { right: -58px; } .flip-clock-divider.hours .flip-clock-label { right: -58px; } .flip-clock-divider.minutes .flip-clock-label { right: -64px; } .flip-clock-divider.seconds .flip-clock-label { right: -64px; } .flip-clock-wrapper ul li { line-height: 50px; } .flip-clock-wrapper ul { width: 37px; } .flip-clock-wrapper ul li a div div.inn { font-size: 30px; } }
0
source

Source: https://habr.com/ru/post/1203617/

More articles:


All Articles