Responsive design not works!

[aircrescio]

Hello, in demo website page http://flipclockjs.com/ responsive design works correctly, but if i test on my web page or a test page responsive not works! Anyone can help me?

[objectivehtml]

It's not really truly responsive. I just used media queries and hacked some dimensions in there. It's not actually resized at scale. The dev branch is working on this but I don't have a good example of this just yet unfortunately. I had to step away from the project for a bit, but hoping to get it back up to speed in the before 2017.

[7jux]

+1 for responsive

[EbiPenMan]

Hi every body.

After much searching for responsive flipclock Finally, I found a temporary solution, but great

You can use jssor slideshow as container

I do not have time to see what doing jssor so all the code I used

but I see this code on jssor : /*responsive code begin*/ /*you can remove responsive code if you don't want the slider scales while window resizing*/ function ScaleSlider() { var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth; if (refSize) { refSize = Math.min(refSize, 980); jssor_1_slider.$ScaleWidth(refSize); } else { window.setTimeout(ScaleSlider, 30); } } ScaleSlider(); $Jssor$.$AddEvent(window, "load", ScaleSlider); $Jssor$.$AddEvent(window, "resize", ScaleSlider); $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider); /*responsive code end*/

if use jssor you must just this setting for good work:

`.flip-clock-wrapper {

transform: scale(.6) !important;
-ms-transform: scale(.6)!important; 
-webkit-transform: scale(.6)!important; 
-o-transform: scale(.6)!important; 
-moz-transform: scale(.6)!important;
transform-origin: 40% 50%;  /* for position */
    position: relative;  /* for position */
margin: auto !important; /* for ignor jssor css */
    width: 50%;   /* for inline digits - set on biger size */

}`

and if clock size changing use this code for true position on every size: document.getElementById("myclock").style.transformOrigin = "75% 50%";

final flipclock code: `

			// Grab the current date
			var currentDate = new Date();

			// Set some date in the future. In this case, it's always Jan 1
			var futureDate  = new Date(Date.UTC(2017, 1, 28, 18, 36, 0, 0));

			// Calculate the difference in seconds between the future and current date
			var diff = futureDate.getTime() / 1000 - currentDate.getTime() / 1000;

			// Instantiate a coutdown FlipClock
			clock = new FlipClock($('.clock'),diff, {
				clockFace: 'DailyCounter',
				countdown: true,
				language: 'fa',
				    callbacks: {
						interval: $(document).ready(function () {
							
							var time = clock.getTime().time;
							if (time < aDayInSecs) {
							  var $days = $("span.days").nextUntil("span").andSelf();
							  document.getElementById("myclock").style.transformOrigin = "60% 50%";
							  if ($days.length>0) {
									$days.remove();  										
							  }
							}
							if (time < anHourInSecs) {
							  var $hours = $("span.hours").nextUntil("span").andSelf();
							  document.getElementById("myclock").style.transformOrigin = "75% 50%";
							  if ($hours.length>0) $hours.remove();  
							}
							if (time < aMinuteInSecs) {
							  var $min = $("span.minutes").nextUntil("span").andSelf();
							  document.getElementById("myclock").style.transformOrigin = "97% 50%";
							  if ($min.length>0) $min.remove();  
							}
							if (time <= 1) {
							  var $sec = $("span.seconds").next("ul").andSelf();
							  if ($sec.length>0) $sec.remove(); 
							  $(".clock").html("<div style='font: normal 80px &quot;web_yekan&quot;;color: #ff1100;'>done</div>"); 
							  document.getElementById("myclock").style.transformOrigin = "40% 50%";								  
							}
						})
					} 
			})
		});
	</script>	`