diff --git a/app/less/app.less b/app/less/app.less
index b123513f..65cdbf15 100755
--- a/app/less/app.less
+++ b/app/less/app.less
@@ -1,5 +1,6 @@
 @import 'colors';
 @import 'fonts';
+@import 'responsive';
 @import 'utilities';
 @import 'icons';
 @import 'background-images';
diff --git a/app/less/header.less b/app/less/header.less
index 63a396fe..27491eb3 100755
--- a/app/less/header.less
+++ b/app/less/header.less
@@ -47,26 +47,21 @@ header {
     color: @warning;
     // Less than 600px screen width: hide text
 
-
     &.disabled {
       color: @warning-disabled;
       cursor: default;
     }
 
     &.selected {
-        background-color: @bgBlack;
+      background-color: @bgBlack;
     }
 
     .menu-item-label {
-        @media screen and (min-width: 541px) {
-            margin-left: 1em;
-        }
-        @media screen and (max-width: 540px) {
-            margin-left: 0.5em;
-        }
-        @media screen and (max-width: 520px) {
-            display: none;
-        }
+      margin-left: 1em;
+
+      .medPhone({
+        display: none;
+      });
     }
   }
 
diff --git a/app/less/outfit.less b/app/less/outfit.less
index 6d9880a2..8b6559c9 100755
--- a/app/less/outfit.less
+++ b/app/less/outfit.less
@@ -7,17 +7,16 @@
 
   .tablet({
     width: 100%;
-    //min-width: 750px;
-    //font-size: 0.8em;
   });
 
   &>.list {
-    @media screen and (max-width: 1000px) {
+    .tablet({
       width: 49%;
-    }
-    @media screen and (max-width: 600px) {
+    });
+
+    .largePhone({
       width: 100%;
-    }
+    });
   }
 }
 
@@ -64,10 +63,10 @@
       color: @primary;
     }
   }
-  @media screen and (max-width: 340px) {
-    button {
+  button {
+    .smallPhone({
       padding: 0.25em;
-    }
+    });
   }
 }
 
@@ -86,21 +85,21 @@
 }
 
 .outfit-button-label {
-    margin-left: 0.5em;
+  margin-left: 0.5em;
 
-    @media screen and (max-width: 640px) {
-        display: none;
-    }
+  .largePhone({
+    display: none;
+  });
 }
 
 #jumpRange {
-    width: 50%;
-    padding: 0 0.5em;
+  width: 50%;
+  padding: 0 0.5em;
 
-    @media screen and (max-width: 1000px) {
-        float: right;
-        clear: both;
-        display: block;
-        width: 100% !important;
-    }
+  .tablet({
+    float: right;
+    clear: both;
+    display: block;
+    width: 100% !important;
+  });
 }
\ No newline at end of file
diff --git a/app/less/responsive.less b/app/less/responsive.less
new file mode 100644
index 00000000..cd22c0dd
--- /dev/null
+++ b/app/less/responsive.less
@@ -0,0 +1,28 @@
+// Screens less than 1024 wide
+// More will be added over time to support mobile devices better
+// These are designed to trickle down. So tablet styles will apply to tablet and smaller, etc
+// To overwrite, put the smallest devices at the bottom
+
+.smallPhone(@rules) {
+  @media only screen and (max-width: 350px) {
+    @rules();
+  }
+}
+
+.medPhone(@rules) {
+  @media only screen and /*(min-width: 351px) and */ (max-width: 550px) {
+    @rules();
+  }
+}
+
+.largePhone(@rules) {
+  @media only screen and /*(min-width: 551px) and */ (max-width: 640px) {
+    @rules();
+  }
+}
+
+.tablet(@rules) {
+  @media only screen and /*(min-width: 601px) and */(max-width: 1024px) {
+    @rules();
+  }
+}
diff --git a/app/less/shipyard.less b/app/less/shipyard.less
index 8bde67b2..ba60f1f2 100755
--- a/app/less/shipyard.less
+++ b/app/less/shipyard.less
@@ -16,9 +16,9 @@ a.ship {
   text-align: right;
   .user-select-none();
 
-  @media screen and (max-width: 350px) {
+  .smallPhone({
     width: 16em;
-  }
+  });
 
   h2 {
     width: 100%;
diff --git a/app/less/slot.less b/app/less/slot.less
index 9bb54733..2937f76c 100755
--- a/app/less/slot.less
+++ b/app/less/slot.less
@@ -17,17 +17,17 @@
     font-weight: normal;
   }
 
-  @media screen and (max-width: 1000px) {
+  .tablet({
     width: 50%;
     
     h1 {
         margin: 1em 0 0 0;
     }
-  }
+  });
 
-  @media screen and (max-width: 610px) {
+  .largePhone({
     width: 100%;
-  }
+  });
 }
 
 .slot {
diff --git a/app/less/utilities.less b/app/less/utilities.less
index 7b7d9f40..93d855ec 100755
--- a/app/less/utilities.less
+++ b/app/less/utilities.less
@@ -29,11 +29,3 @@
   -ms-user-select: none;
   user-select: none;
 }
-
-// Screens less than 1024 wide
-// More will be added over time to support mobile devices better
-.tablet(@rules) {
-  @media only screen and (min-width: 300px) and (max-width: 1024px) {
-    @rules();
-  }
-}