Responsive flip-clock-wrapper class

Hi there,
I’m well aware of this. Actually the problem is that [Flipclock.js](https://flipclockjs.com/) is a third party script, and the responsive request has been submitted there for a long time. I’ve already tried to implement it but didn’t work as expected.
That is why I have followed some other workaround to fix it. I think you are using Chrome or and webkit browser, instead you are using firefox. In you use chrome and open your dashbord you will see that it loads exactly as it should. But unfortunately firefrox dev team are very slow implementing new css3 rules and thats why it doesn’t work there.

Sorry for this. I will suggest you to try it out on chrome and let me know.

I will keep an eye on it for a future generic fix.

Thank you iSaumya.

Actually it works fine in Chrome, but we use Mozilla Firefox ??

We’ll try to help on FlipClock in Github and we’ll wait until your soon update ??

Kind regards.

That sounds cool. If you figure out any way to fix it for firefox, please let me know here. I will be more than happy to fix the code ??

Check this: https://github.com/objectivehtml/FlipClock/commit/a4197829b7eca7a233a6212b07911811ae0acd9e.

Kind regards.

Thanks buddy. Will push an update with the new css fix. But in that github note, you have shown the css code that needs to be added, but on which class? Can you mention that?

.flip-clock-wrapper

Thanks, will push the update as soon as I get some free time…. ??

Update has been pushed. ??
Please put a review, if you like the plugin.

Thank you.

If you can, please share your review on this plugin, if you like it. Each review matters ??

Added ??

Kind regards.

Thank you ??

Please, change:

.flip-clock-wrapper {
  text-align: center;
  position: relative;
  width: 100%;
  margin: 1em;
  -moz-transform: scale(0.54,0.54);
  -moz-transform-origin: 0 0;
  width:-moz-max-content;
}

with:

.flip-clock-wrapper {
  text-align: center;
  position: relative;
  width: 100%;
  margin: 1em;
  -moz-transform: scale(0.8);
  -moz-transform-origin: 0 0;
  width:-moz-max-content;
}

Kind regards.

Why? 0.8 is looking bad on screen and its getting out of the container. So I can’t use 0.8. On the overhead have 0.54 send perfect.

I tried something like this:

.flip-clock-wrapper {
  text-align: center;
  position: relative;
  width: 100%;
  margin: 1em;
  -moz-transform: scale(0.8);
  -moz-transform-origin: 0 0;
  width:-moz-max-content;
}
@media only screen and (max-width:799px) {
.flip-clock-wrapper {
  margin: 0;
  -moz-transform: scale(0.48);
  -moz-transform-origin: 0 0;
  width:-moz-max-content;
}
}
@media only screen and (min-width:800px) and (max-width:1499px) {
.flip-clock-wrapper {
  margin: 0;
  -moz-transform: scale(0.52);
  -moz-transform-origin: 0 0;
  width:-moz-max-content;
}
}
@media only screen and (min-width:1500px) and (max-width:1800px) {
.flip-clock-wrapper {
  margin: 0;
  -moz-transform: scale(0.65);
  -moz-transform-origin: 0 0;
  width:-moz-max-content;
}
}

But doesn’t work fine ??

Please, try this JavaScript solution: https://stackoverflow.com/a/22641488

Kind regards.