Hi,
the plugin uses flipclock js along with some custom CSS media queries to make it responsive.
Hope this helps.
Is it just your custom CSS that makes it responsive or some js as well? *I tried using the CSS file in your plugin package and the clock doesn’t scale down.
-
This reply was modified 7 years, 6 months ago by
Revived.
Hi,
I’m really sorry. It’s CSS but implemented using JS.
$(window).resize(function () {
var browserWidth = $( window ).width();
//console.log('width ' + browserWidth);
if ( browserWidth > 1800 ) {
var zoom = ( (0.54 / 1920) * browserWidth );
} else if ( browserWidth > 1499 && browserWidth <= 1800) {
var zoom = ( (0.68 / 1800) * browserWidth );
} else if ( browserWidth > 1252 && browserWidth <= 1499) {
var zoom = ( (0.81 / 1426) * browserWidth );
} else if ( browserWidth > 943 && browserWidth <= 1252) {
var zoom = ( (0.48 / 947) * browserWidth );
} else if ( browserWidth > 782 && browserWidth <= 943) {
var zoom = ( (0.45 / 782) * browserWidth );
} else {
var zoom = ( (0.6 / 491) * browserWidth );
}
//console.log('zoom ' + zoom);
$('.uptime').css({
'zoom' : ''+zoom+'',
'-ms-transform': 'scale('+zoom+','+zoom+')',
'-moz-transform': 'scale('+zoom+','+zoom+')',
'-ms-transform-origin': '0 0',
'-moz-transform-origin': '0 0',
'width': '-moz-max-content'
});
}).resize();
This is the code implementation. Back then I used to use jQuery but this can also be written in vanilla javascript with ES6 or ES7 however you prefer. Hope this helps.
Finally got it working (and responsive) with that JS, thank you!
