Title: Responsive flip-clock-wrapper class
Last modified: August 30, 2016

---

# Responsive flip-clock-wrapper class

 *  Resolved [Art Project Group](https://wordpress.org/support/users/artprojectgroup/)
 * (@artprojectgroup)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/responsive-flip-clock-wrapper-class/)
 * First of all, thank you for your great plugin.
 * Please, can you update your flip clock to make it responsive?
 * Normally we use a four column WordPress desktop and your clock is shown in two
   columns 🙁
 * Kind regards.
 * [https://wordpress.org/plugins/wp-server-stats/](https://wordpress.org/plugins/wp-server-stats/)

Viewing 15 replies - 1 through 15 (of 31 total)

1 [2](https://wordpress.org/support/topic/responsive-flip-clock-wrapper-class/page/2/?output_format=md)
[3](https://wordpress.org/support/topic/responsive-flip-clock-wrapper-class/page/3/?output_format=md)
[→](https://wordpress.org/support/topic/responsive-flip-clock-wrapper-class/page/2/?output_format=md)

 *  Plugin Author [iSaumya](https://wordpress.org/support/users/isaumya/)
 * (@isaumya)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/responsive-flip-clock-wrapper-class/#post-6739890)
 * Hi there,
    I’m well aware of this. Actually the problem is that [Flipclock.js](
   [http://flipclockjs.com/](http://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.
 *  Thread Starter [Art Project Group](https://wordpress.org/support/users/artprojectgroup/)
 * (@artprojectgroup)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/responsive-flip-clock-wrapper-class/#post-6739903)
 * Thank you iSaumya.
 * Actually it works fine in Chrome, but we use Mozilla Firefox 🙁
 * We’ll try to help on [FlipClock in Github](https://github.com/objectivehtml/FlipClock)
   and we’ll wait until your soon update 😉
 * Kind regards.
 *  Plugin Author [iSaumya](https://wordpress.org/support/users/isaumya/)
 * (@isaumya)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/responsive-flip-clock-wrapper-class/#post-6739907)
 * 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 🙂
 *  Thread Starter [Art Project Group](https://wordpress.org/support/users/artprojectgroup/)
 * (@artprojectgroup)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/responsive-flip-clock-wrapper-class/#post-6740130)
 * Check this: [https://github.com/objectivehtml/FlipClock/commit/a4197829b7eca7a233a6212b07911811ae0acd9e](https://github.com/objectivehtml/FlipClock/commit/a4197829b7eca7a233a6212b07911811ae0acd9e).
 * Kind regards.
 *  Plugin Author [iSaumya](https://wordpress.org/support/users/isaumya/)
 * (@isaumya)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/responsive-flip-clock-wrapper-class/#post-6740131)
 * 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?
 *  Thread Starter [Art Project Group](https://wordpress.org/support/users/artprojectgroup/)
 * (@artprojectgroup)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/responsive-flip-clock-wrapper-class/#post-6740132)
 * .flip-clock-wrapper
 *  Plugin Author [iSaumya](https://wordpress.org/support/users/isaumya/)
 * (@isaumya)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/responsive-flip-clock-wrapper-class/#post-6740133)
 * Thanks, will push the update as soon as I get some free time…. 🙂
 *  Plugin Author [iSaumya](https://wordpress.org/support/users/isaumya/)
 * (@isaumya)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/responsive-flip-clock-wrapper-class/#post-6740134)
 * Update has been pushed. 🙂
    Please put a review, if you like the plugin.
 *  Thread Starter [Art Project Group](https://wordpress.org/support/users/artprojectgroup/)
 * (@artprojectgroup)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/responsive-flip-clock-wrapper-class/#post-6740135)
 * Thank you.
 *  Plugin Author [iSaumya](https://wordpress.org/support/users/isaumya/)
 * (@isaumya)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/responsive-flip-clock-wrapper-class/#post-6740136)
 * If you can, please share your review on this plugin, if you like it. Each review
   matters 🙂
 *  Thread Starter [Art Project Group](https://wordpress.org/support/users/artprojectgroup/)
 * (@artprojectgroup)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/responsive-flip-clock-wrapper-class/#post-6740137)
 * Added 😉
 * Kind regards.
 *  Plugin Author [iSaumya](https://wordpress.org/support/users/isaumya/)
 * (@isaumya)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/responsive-flip-clock-wrapper-class/#post-6740138)
 * Thank you 🙂
 *  Thread Starter [Art Project Group](https://wordpress.org/support/users/artprojectgroup/)
 * (@artprojectgroup)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/responsive-flip-clock-wrapper-class/#post-6740161)
 * 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.
 *  Plugin Author [iSaumya](https://wordpress.org/support/users/isaumya/)
 * (@isaumya)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/responsive-flip-clock-wrapper-class/#post-6740167)
 * 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.
 *  Thread Starter [Art Project Group](https://wordpress.org/support/users/artprojectgroup/)
 * (@artprojectgroup)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/responsive-flip-clock-wrapper-class/#post-6740168)
 * 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: [http://stackoverflow.com/a/22641488](http://stackoverflow.com/a/22641488)
 * Kind regards.

Viewing 15 replies - 1 through 15 (of 31 total)

1 [2](https://wordpress.org/support/topic/responsive-flip-clock-wrapper-class/page/2/?output_format=md)
[3](https://wordpress.org/support/topic/responsive-flip-clock-wrapper-class/page/3/?output_format=md)
[→](https://wordpress.org/support/topic/responsive-flip-clock-wrapper-class/page/2/?output_format=md)

The topic ‘Responsive flip-clock-wrapper class’ is closed to new replies.

 * ![](https://ps.w.org/wp-server-stats/assets/icon-256x256.png?rev=1273709)
 * [WP Server Health Stats](https://wordpress.org/plugins/wp-server-stats/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/wp-server-stats/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/wp-server-stats/)
 * [Active Topics](https://wordpress.org/support/plugin/wp-server-stats/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/wp-server-stats/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/wp-server-stats/reviews/)

 * 31 replies
 * 2 participants
 * Last reply from: [Art Project Group](https://wordpress.org/support/users/artprojectgroup/)
 * Last activity: [10 years, 5 months ago](https://wordpress.org/support/topic/responsive-flip-clock-wrapper-class/page/3/#post-6740202)
 * Status: resolved