diff --git a/example/css/flipdown/flipdown.css b/example/css/flipdown/flipdown.css
index 9531476..67042cf 100644
--- a/example/css/flipdown/flipdown.css
+++ b/example/css/flipdown/flipdown.css
@@ -11,21 +11,23 @@
   color: #000000;
 }
 /* Delimeters */
-.flipdown.flipdown__theme-dark .rotor-group:nth-child(n+2):nth-child(-n+3):before,
-.flipdown.flipdown__theme-dark .rotor-group:nth-child(n+2):nth-child(-n+3):after {
+.flipdown.flipdown__theme-dark
+  .rotor-group:nth-child(n + 2):nth-child(-n + 3):before,
+.flipdown.flipdown__theme-dark
+  .rotor-group:nth-child(n + 2):nth-child(-n + 3):after {
   background-color: #151515;
 }
 /* Rotor tops */
 .flipdown.flipdown__theme-dark .rotor,
 .flipdown.flipdown__theme-dark .rotor-top,
 .flipdown.flipdown__theme-dark .rotor-leaf-front {
-  color: #FFFFFF;
+  color: #ffffff;
   background-color: #151515;
 }
 /* Rotor bottoms */
 .flipdown.flipdown__theme-dark .rotor-bottom,
 .flipdown.flipdown__theme-dark .rotor-leaf-rear {
-  color: #EFEFEF;
+  color: #efefef;
   background-color: #202020;
 }
 /* Hinge */
@@ -41,25 +43,27 @@
 }
 /* Rotor group headings */
 .flipdown.flipdown__theme-light .rotor-group-heading:before {
-  color: #EEEEEE;
+  color: #eeeeee;
 }
 /* Delimeters */
-.flipdown.flipdown__theme-light .rotor-group:nth-child(n+2):nth-child(-n+3):before,
-.flipdown.flipdown__theme-light .rotor-group:nth-child(n+2):nth-child(-n+3):after {
-  background-color: #DDDDDD;
+.flipdown.flipdown__theme-light
+  .rotor-group:nth-child(n + 2):nth-child(-n + 3):before,
+.flipdown.flipdown__theme-light
+  .rotor-group:nth-child(n + 2):nth-child(-n + 3):after {
+  background-color: #dddddd;
 }
 /* Rotor tops */
 .flipdown.flipdown__theme-light .rotor,
 .flipdown.flipdown__theme-light .rotor-top,
 .flipdown.flipdown__theme-light .rotor-leaf-front {
   color: #222222;
-  background-color: #DDDDDD;
+  background-color: #dddddd;
 }
 /* Rotor bottoms */
 .flipdown.flipdown__theme-light .rotor-bottom,
 .flipdown.flipdown__theme-light .rotor-leaf-rear {
   color: #333333;
-  background-color: #EEEEEE;
+  background-color: #eeeeee;
 }
 /* Hinge */
 .flipdown.flipdown__theme-light .rotor:after {
@@ -70,7 +74,6 @@
 
 .flipdown {
   overflow: visible;
-  width: 510px;
   height: 110px;
 }
 
@@ -107,8 +110,8 @@
   content: attr(data-before);
 }
 
-.flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):before {
-  content: '';
+.flipdown .rotor-group:nth-child(n + 2):nth-child(-n + 3):before {
+  content: "";
   position: absolute;
   bottom: 20px;
   left: 115px;
@@ -117,8 +120,8 @@
   border-radius: 50%;
 }
 
-.flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):after {
-  content: '';
+.flipdown .rotor-group:nth-child(n + 2):nth-child(-n + 3):after {
+  content: "";
   position: absolute;
   bottom: 50px;
   left: 115px;
@@ -200,7 +203,7 @@
 }
 
 .flipdown .rotor:after {
-  content: '';
+  content: "";
   z-index: 2;
   position: absolute;
   bottom: 0px;
@@ -210,10 +213,8 @@
   border-radius: 0px 0px 4px 4px;
 }
 
-@media (max-width: 550px) {
-
+@media (max-width: 570px) {
   .flipdown {
-    width: 312px;
     height: 70px;
   }
 
@@ -246,18 +247,18 @@
     line-height: 20px;
   }
 
-  .flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):before,
-  .flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):after {
+  .flipdown .rotor-group:nth-child(n + 2):nth-child(-n + 3):before,
+  .flipdown .rotor-group:nth-child(n + 2):nth-child(-n + 3):after {
     left: 69px;
   }
 
-  .flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):before {
+  .flipdown .rotor-group:nth-child(n + 2):nth-child(-n + 3):before {
     bottom: 13px;
     height: 8px;
     width: 8px;
   }
 
-  .flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):after {
+  .flipdown .rotor-group:nth-child(n + 2):nth-child(-n + 3):after {
     bottom: 29px;
     height: 8px;
     width: 8px;
@@ -281,3 +282,28 @@
     height: 25px;
   }
 }
+
+@media screen and (max-width: 350px) {
+  .flipdown .rotor,
+  .flipdown .rotor-leaf,
+  .flipdown .rotor-leaf-front,
+  .flipdown .rotor-leaf-rear,
+  .flipdown .rotor-top,
+  .flipdown .rotor-bottom,
+  .flipdown .rotor:after {
+    width: 20px;
+  }
+
+  .flipdown .rotor-group:nth-child(n + 2):nth-child(-n + 3):before,
+  .flipdown .rotor-group:nth-child(n + 2):nth-child(-n + 3):after {
+    left: 49px;
+  }
+}
+
+@media screen and (max-width: 260px) {
+  .flipdown,
+  .flipdown * {
+    display: none;
+    height: 0;
+  }
+}
diff --git a/example/css/style.css b/example/css/style.css
index f726b1a..404e644 100644
--- a/example/css/style.css
+++ b/example/css/style.css
@@ -14,7 +14,7 @@ body,
 .example h1,
 .example p,
 .example .button {
-  transition: all .2s ease-in-out;
+  transition: all 0.2s ease-in-out;
 }
 
 body.light-theme {
@@ -22,29 +22,27 @@ body.light-theme {
 }
 
 body.light-theme .example h1 {
-  color: #FFFFFF;
+  color: #ffffff;
 }
 
 body.light-theme .example p {
-  color: #FFFFFF;
+  color: #ffffff;
 }
 
 body.light-theme .buttons .button {
-  color: #FFFFFF;
-  border-color: #FFFFFF;
+  color: #ffffff;
+  border-color: #ffffff;
 }
 
 body.light-theme .buttons .button:hover {
   color: #151515;
-  background-color: #FFFFFF;
+  background-color: #ffffff;
 }
 
 .example {
-  font-family: 'Roboto', sans-serif;
-  width: 550px;
+  font-family: "Roboto", sans-serif;
   height: 378px;
   margin: auto;
-  padding: 20px;
   box-sizing: border-box;
 }
 
@@ -97,21 +95,20 @@ body.light-theme .buttons .button:hover {
   border-radius: 4px;
   text-transform: uppercase;
   font-weight: 700;
-  transition: all .2s ease-in-out;
+  transition: all 0.2s ease-in-out;
 }
 
 .example .button:hover {
   background-color: #333;
-  color: #FFF;
+  color: #fff;
 }
 
 .example .button i {
   margin-right: 5px;
 }
 
-@media(max-width: 550px) {
+@media (max-width: 550px) {
   .example {
-    width: 100%;
     height: 362px;
   }
 
diff --git a/example/js/main.js b/example/js/main.js
index 8fd8102..318f4c6 100644
--- a/example/js/main.js
+++ b/example/js/main.js
@@ -1,7 +1,6 @@
-document.addEventListener('DOMContentLoaded', () => {
-
+document.addEventListener("DOMContentLoaded", () => {
   // Unix timestamp (in seconds) to count down to
-  var twoDaysFromNow = (new Date().getTime() / 1000) + (86400 * 2) + 1;
+  var twoDaysFromNow = new Date() / 1000 + 86400 * 2 + 1;
 
   // Set up FlipDown
   var flipdown = new FlipDown(twoDaysFromNow)
@@ -11,18 +10,18 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // Do something when the countdown ends
     .ifEnded(() => {
-      console.log('The countdown has ended!');
+      console.log("The countdown has ended!");
     });
 
   // Toggle theme
   var interval = setInterval(() => {
     let body = document.body;
-    body.classList.toggle('light-theme');
-    body.querySelector('#flipdown').classList.toggle('flipdown__theme-dark');
-    body.querySelector('#flipdown').classList.toggle('flipdown__theme-light');
+    body.classList.toggle("light-theme");
+    body.querySelector("#flipdown").classList.toggle("flipdown__theme-dark");
+    body.querySelector("#flipdown").classList.toggle("flipdown__theme-light");
   }, 5000);
 
   // Show version number
-  var ver = document.getElementById('ver');
+  var ver = document.getElementById("ver");
   ver.innerHTML = flipdown.version;
 });
diff --git a/src/flipdown.css b/src/flipdown.css
index 9531476..67042cf 100644
--- a/src/flipdown.css
+++ b/src/flipdown.css
@@ -11,21 +11,23 @@
   color: #000000;
 }
 /* Delimeters */
-.flipdown.flipdown__theme-dark .rotor-group:nth-child(n+2):nth-child(-n+3):before,
-.flipdown.flipdown__theme-dark .rotor-group:nth-child(n+2):nth-child(-n+3):after {
+.flipdown.flipdown__theme-dark
+  .rotor-group:nth-child(n + 2):nth-child(-n + 3):before,
+.flipdown.flipdown__theme-dark
+  .rotor-group:nth-child(n + 2):nth-child(-n + 3):after {
   background-color: #151515;
 }
 /* Rotor tops */
 .flipdown.flipdown__theme-dark .rotor,
 .flipdown.flipdown__theme-dark .rotor-top,
 .flipdown.flipdown__theme-dark .rotor-leaf-front {
-  color: #FFFFFF;
+  color: #ffffff;
   background-color: #151515;
 }
 /* Rotor bottoms */
 .flipdown.flipdown__theme-dark .rotor-bottom,
 .flipdown.flipdown__theme-dark .rotor-leaf-rear {
-  color: #EFEFEF;
+  color: #efefef;
   background-color: #202020;
 }
 /* Hinge */
@@ -41,25 +43,27 @@
 }
 /* Rotor group headings */
 .flipdown.flipdown__theme-light .rotor-group-heading:before {
-  color: #EEEEEE;
+  color: #eeeeee;
 }
 /* Delimeters */
-.flipdown.flipdown__theme-light .rotor-group:nth-child(n+2):nth-child(-n+3):before,
-.flipdown.flipdown__theme-light .rotor-group:nth-child(n+2):nth-child(-n+3):after {
-  background-color: #DDDDDD;
+.flipdown.flipdown__theme-light
+  .rotor-group:nth-child(n + 2):nth-child(-n + 3):before,
+.flipdown.flipdown__theme-light
+  .rotor-group:nth-child(n + 2):nth-child(-n + 3):after {
+  background-color: #dddddd;
 }
 /* Rotor tops */
 .flipdown.flipdown__theme-light .rotor,
 .flipdown.flipdown__theme-light .rotor-top,
 .flipdown.flipdown__theme-light .rotor-leaf-front {
   color: #222222;
-  background-color: #DDDDDD;
+  background-color: #dddddd;
 }
 /* Rotor bottoms */
 .flipdown.flipdown__theme-light .rotor-bottom,
 .flipdown.flipdown__theme-light .rotor-leaf-rear {
   color: #333333;
-  background-color: #EEEEEE;
+  background-color: #eeeeee;
 }
 /* Hinge */
 .flipdown.flipdown__theme-light .rotor:after {
@@ -70,7 +74,6 @@
 
 .flipdown {
   overflow: visible;
-  width: 510px;
   height: 110px;
 }
 
@@ -107,8 +110,8 @@
   content: attr(data-before);
 }
 
-.flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):before {
-  content: '';
+.flipdown .rotor-group:nth-child(n + 2):nth-child(-n + 3):before {
+  content: "";
   position: absolute;
   bottom: 20px;
   left: 115px;
@@ -117,8 +120,8 @@
   border-radius: 50%;
 }
 
-.flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):after {
-  content: '';
+.flipdown .rotor-group:nth-child(n + 2):nth-child(-n + 3):after {
+  content: "";
   position: absolute;
   bottom: 50px;
   left: 115px;
@@ -200,7 +203,7 @@
 }
 
 .flipdown .rotor:after {
-  content: '';
+  content: "";
   z-index: 2;
   position: absolute;
   bottom: 0px;
@@ -210,10 +213,8 @@
   border-radius: 0px 0px 4px 4px;
 }
 
-@media (max-width: 550px) {
-
+@media (max-width: 570px) {
   .flipdown {
-    width: 312px;
     height: 70px;
   }
 
@@ -246,18 +247,18 @@
     line-height: 20px;
   }
 
-  .flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):before,
-  .flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):after {
+  .flipdown .rotor-group:nth-child(n + 2):nth-child(-n + 3):before,
+  .flipdown .rotor-group:nth-child(n + 2):nth-child(-n + 3):after {
     left: 69px;
   }
 
-  .flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):before {
+  .flipdown .rotor-group:nth-child(n + 2):nth-child(-n + 3):before {
     bottom: 13px;
     height: 8px;
     width: 8px;
   }
 
-  .flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):after {
+  .flipdown .rotor-group:nth-child(n + 2):nth-child(-n + 3):after {
     bottom: 29px;
     height: 8px;
     width: 8px;
@@ -281,3 +282,28 @@
     height: 25px;
   }
 }
+
+@media screen and (max-width: 350px) {
+  .flipdown .rotor,
+  .flipdown .rotor-leaf,
+  .flipdown .rotor-leaf-front,
+  .flipdown .rotor-leaf-rear,
+  .flipdown .rotor-top,
+  .flipdown .rotor-bottom,
+  .flipdown .rotor:after {
+    width: 20px;
+  }
+
+  .flipdown .rotor-group:nth-child(n + 2):nth-child(-n + 3):before,
+  .flipdown .rotor-group:nth-child(n + 2):nth-child(-n + 3):after {
+    left: 49px;
+  }
+}
+
+@media screen and (max-width: 260px) {
+  .flipdown,
+  .flipdown * {
+    display: none;
+    height: 0;
+  }
+}