diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 354cfe66e..5064d115b 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -76,6 +76,37 @@ window.minimiseMap = function () {
 };
 
 $(document).ready(function () {
+  var headerWidth = 0,
+      compactWidth = 0;
+
+  $("header").children(":visible").each(function (i,e) {
+    headerWidth = headerWidth + $(e).outerWidth();
+  });
+
+  $("body").addClass("compact");
+
+  $("header").children(":visible").each(function (i,e) {
+    compactWidth = compactWidth + $(e).outerWidth();
+  });
+
+  $("body").removeClass("compact");
+
+  function updateHeader() {
+    var windowWidth = $(window).width();
+
+    if (windowWidth < compactWidth) {
+      $("body").removeClass("compact").addClass("small");
+    } else if (windowWidth < headerWidth) {
+      $("body").addClass("compact").removeClass("small");
+    } else {
+      $("body").removeClass("compact").removeClass("small");
+    }
+  }
+
+  updateHeader();
+
+  $(window).resize(updateHeader);
+
   $("#menu-icon").on("click", function(e) {
     e.preventDefault();
     $("header").toggleClass("closed");
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 61975d5f6..6706aa6ed 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -228,7 +228,7 @@ table {
 
 /* Rules for the header */
 
-#menu-icon { 
+#menu-icon {
   display: none !important;
   float: right;
   background: image-url("menu-icon.png") no-repeat;
@@ -290,7 +290,7 @@ nav.primary {
     > li {
       border-right: $border;
       float: left;
-      &:last-child { 
+      &:last-child {
         border-right: 0;
       }
       > a:hover { background: lighten($green, 30%); }
@@ -371,12 +371,12 @@ nav.secondary {
     > li {
       border-right: $border;
       float: left;
-      &:last-child { 
+      &:last-child {
         border-right: 0;
 
         > a {
           border-radius: 0 $border-radius $border-radius 0;
-        } 
+        }
       }
       &:first-child > a { border-radius: $border-radius 0 0 $border-radius; }
       &:hover a { background: lighten($darkgrey, 30%); }
@@ -444,7 +444,7 @@ nav.secondary {
   }
 }
 
-@media only screen and (max-width:960px) {
+body.compact {
   #compact-secondary-nav {
     display: inline-block;
   }
@@ -616,7 +616,7 @@ nav.secondary {
     &.query-disabled {
       cursor: not-allowed;
     }
-    
+
     .leaflet-marker-draggable {
       cursor: move;
     }
@@ -677,7 +677,7 @@ nav.secondary {
       margin-bottom: 8px;
       position: relative;
       transition: border-color 0.08s ease-in;
-      
+
       label {
         position: absolute;
         top: 0;
@@ -813,10 +813,10 @@ nav.secondary {
   padding: $lineheight/2 $lineheight;
   // background: $offwhite;
   // border-bottom: 1px solid #ccc;
-  > .close { 
+  > .close {
     float: right;
     margin-top: 2px;
-    cursor: pointer; 
+    cursor: pointer;
   }
 }
 
@@ -1296,7 +1296,7 @@ tr.turn:hover {
 
 .content-heading {
   background: $lightgrey;
-  
+
   h1 { font-size: 22px; }
 }
 
@@ -1892,7 +1892,7 @@ tr.turn:hover {
     padding-top: $lineheight;
     border-top: 1px solid $lightgrey;
   }
-  .horizontal-list .form-row { 
+  .horizontal-list .form-row {
     float: left;
     padding-right: 10px;
   }
@@ -2460,7 +2460,7 @@ input.richtext_title[type="text"] {
 .site-welcome, .site-fixthemap {
   .center {
     text-align: center;
-    .sprite { 
+    .sprite {
       float: none;
       margin: auto;
     }
@@ -2473,7 +2473,7 @@ input.richtext_title[type="text"] {
     float: left;
   }
 
-  .icon-list { 
+  .icon-list {
     padding-bottom: 20px;
     div {
       margin-bottom: 10px;
@@ -2681,4 +2681,3 @@ input.richtext_title[type="text"] {
     display: none;
   }
 }
-
diff --git a/app/assets/stylesheets/large-ltr.css b/app/assets/stylesheets/large-ltr.css
deleted file mode 100644
index a02924a84..000000000
--- a/app/assets/stylesheets/large-ltr.css
+++ /dev/null
@@ -1,5 +0,0 @@
-/*
- *= require ltr/common
- *= require bootstrap
- *= require large
- */
diff --git a/app/assets/stylesheets/large-rtl.css b/app/assets/stylesheets/large-rtl.css
deleted file mode 100644
index ae512fd42..000000000
--- a/app/assets/stylesheets/large-rtl.css
+++ /dev/null
@@ -1,5 +0,0 @@
-/*
- *= require rtl/common
- *= require bootstrap
- *= require large
- */
diff --git a/app/assets/stylesheets/large.css b/app/assets/stylesheets/large.css
deleted file mode 100644
index 050272b77..000000000
--- a/app/assets/stylesheets/large.css
+++ /dev/null
@@ -1 +0,0 @@
-/* Styles specific to large screens  */
diff --git a/app/assets/stylesheets/small-ltr.css b/app/assets/stylesheets/screen-ltr.css
similarity index 100%
rename from app/assets/stylesheets/small-ltr.css
rename to app/assets/stylesheets/screen-ltr.css
diff --git a/app/assets/stylesheets/small-rtl.css b/app/assets/stylesheets/screen-rtl.css
similarity index 100%
rename from app/assets/stylesheets/small-rtl.css
rename to app/assets/stylesheets/screen-rtl.css
diff --git a/app/assets/stylesheets/small.scss b/app/assets/stylesheets/small.scss
index 950e1214d..1865572a3 100644
--- a/app/assets/stylesheets/small.scss
+++ b/app/assets/stylesheets/small.scss
@@ -2,191 +2,195 @@
 
 /* Styles specific to a small screen, such as iPhone, Android, etc... */
 
-input[type="submit"],
-input[type="text"] {
-  -webkit-appearance: none;
-}
+body.small {
 
-.column-1 {
-  width: 100%;
-}
-
-#menu-icon {
-  display: inline-block !important;
-}
-
-nav.primary,
-nav.secondary {
-  float: none !important;
-  position: relative;
-  display: block;
-  clear: both;
-}
-
-header {
-  height: auto;
-  min-height: $headerHeight;
-  background: #fff;
-
-  h1 {
-    padding-bottom: 15px;
+  input[type="submit"],
+  input[type="text"] {
+    -webkit-appearance: none;
   }
 
-  &.closed nav {
-    display: none;
-  }
-
-  .search_forms {
-    display: block;
-  }
-}
-
-#sidebar .search_forms,
-#edit_tab,
-#export_tab {
-  display: none;
-}
-
-nav.primary {
-  padding: 0;
-
-  ul, li {
-    border: none;
-    border-radius: 0;
+  .column-1 {
     width: 100%;
   }
 
-  ul {
-    border-top: 1px solid #eee;
-    li {
-      border-bottom: 1px solid #eee;
-      border-right: none;
-      > a {
-        border-radius: 0;
-        width: 100%;
-        text-align: center;
-        font-size: 15px;
-      }
-    }
+  #menu-icon {
+    display: inline-block !important;
   }
-}
 
-nav.secondary {
-  border-bottom: 1px solid #eee;
-
-  .user-menu {
-    display: block;
-    width: 100%;
-    margin-left: 0;
-    > li {
-      width: 49%;
-      > a { 
-        width: 100%; 
-        text-align: center;
-      }
-    }
-  }
-}
-
-#compact-secondary-nav {
-  display: none;
-}
-
-.compact-hide {
-  display: inline-block;
-}
-
-.map-layout {
-  #sidebar, #map {
+  nav.primary,
+  nav.secondary {
+    float: none !important;
     position: relative;
-    overflow-x: hidden;
-    width: 100%;
-    height: 50%;
+    display: block;
+    clear: both;
   }
 
-  .overlay-sidebar {
-    #sidebar {
-      width: 300px;
+  header {
+    height: auto;
+    min-height: $headerHeight;
+    background: #fff;
+
+    h1 {
+      padding-bottom: 15px;
     }
 
-    #map {
-      height: 100%;
+    &.closed nav {
+      display: none;
+    }
+
+    .search_forms {
+      display: block;
     }
   }
 
-  #map-ui {
-    z-index: 9999;
-    width: 100%;
-    overflow-y: scroll;
-  }
-}
-
-#sidebar .welcome {
-  display: none !important;
-}
-
-.leaflet-top.leaflet-right {
-  top: 10px !important;
-  z-index: 0;
-}
-
-.content_map {
-  width: 100%;
-  border: none;
-  float: none;
-  height: 200px;
-  max-height: none;
-  min-height: auto;
-}
-
-/* Rules for the login form */
-
-#login_login input#user_email {
-  width: 100%;
-  max-width: 18em;
-}
-
-#login_login input#user_password {
-  width: 100%;
-  max-width: 18em;
-}
-
-#login_login input#openid_url {
-  width: 100%;
-  max-width: 18em;
-}
-
-#login_openid_buttons td {
-  padding: 2px;
-}
-
-/* Rules for the user view */
-
-.user_map {
-  width: 100% !important;
-  height: 300px !important;
-}
-
-#userinformation .deemphasize {
-  position: relative;
-  right: auto; left: auto;
-  margin-top: 10px;
-  top: auto;
-}
-
-/* Rules for the sign-up page */
-
-.user-new,
-.user-create {
-  .col6 {
-    width: 100%;
-  }
-
-  .aside {
+  #sidebar .search_forms,
+  #edit_tab,
+  #export_tab {
     display: none;
   }
-}
 
-.site-about #content .attr h1 {
-  font-size: 28px;
+  nav.primary {
+    padding: 0;
+
+    ul, li {
+      border: none;
+      border-radius: 0;
+      width: 100%;
+    }
+
+    ul {
+      border-top: 1px solid #eee;
+      li {
+        border-bottom: 1px solid #eee;
+        border-right: none;
+        > a {
+          border-radius: 0;
+          width: 100%;
+          text-align: center;
+          font-size: 15px;
+        }
+      }
+    }
+  }
+
+  nav.secondary {
+    border-bottom: 1px solid #eee;
+
+    .user-menu {
+      display: block;
+      width: 100%;
+      margin-left: 0;
+      > li {
+        width: 49%;
+        > a {
+          width: 100%;
+          text-align: center;
+        }
+      }
+    }
+  }
+
+  #compact-secondary-nav {
+    display: none;
+  }
+
+  .compact-hide {
+    display: inline-block;
+  }
+
+  .map-layout {
+    #sidebar, #map {
+      position: relative;
+      overflow-x: hidden;
+      width: 100%;
+      height: 50%;
+    }
+
+    .overlay-sidebar {
+      #sidebar {
+        width: 300px;
+      }
+
+      #map {
+        height: 100%;
+      }
+    }
+
+    #map-ui {
+      z-index: 9999;
+      width: 100%;
+      overflow-y: scroll;
+    }
+  }
+
+  #sidebar .welcome {
+    display: none !important;
+  }
+
+  .leaflet-top.leaflet-right {
+    top: 10px !important;
+    z-index: 0;
+  }
+
+  .content_map {
+    width: 100%;
+    border: none;
+    float: none;
+    height: 200px;
+    max-height: none;
+    min-height: auto;
+  }
+
+  /* Rules for the login form */
+
+  #login_login input#user_email {
+    width: 100%;
+    max-width: 18em;
+  }
+
+  #login_login input#user_password {
+    width: 100%;
+    max-width: 18em;
+  }
+
+  #login_login input#openid_url {
+    width: 100%;
+    max-width: 18em;
+  }
+
+  #login_openid_buttons td {
+    padding: 2px;
+  }
+
+  /* Rules for the user view */
+
+  .user_map {
+    width: 100% !important;
+    height: 300px !important;
+  }
+
+  #userinformation .deemphasize {
+    position: relative;
+    right: auto; left: auto;
+    margin-top: 10px;
+    top: auto;
+  }
+
+  /* Rules for the sign-up page */
+
+  .user-new,
+  .user-create {
+    .col6 {
+      width: 100%;
+    }
+
+    .aside {
+      display: none;
+    }
+  }
+
+  .site-about #content .attr h1 {
+    font-size: 28px;
+  }
+
 }
diff --git a/app/views/layouts/_head.html.erb b/app/views/layouts/_head.html.erb
index 320737274..ee23358ce 100644
--- a/app/views/layouts/_head.html.erb
+++ b/app/views/layouts/_head.html.erb
@@ -3,8 +3,7 @@
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"/>
   <!--[if lt IE 9]><%= javascript_include_tag "html5shiv" %><![endif]-->
   <%= javascript_include_tag "application" %>
-  <%= stylesheet_link_tag "small-#{dir}", :media => "only screen and (max-width:721px)" %>
-  <%= stylesheet_link_tag "large-#{dir}", :media => "screen and (min-width: 722px)" %>
+  <%= stylesheet_link_tag "screen-#{dir}", :media => "screen" %>
   <%= stylesheet_link_tag "print-#{dir}", :media => "print" %>
   <%= stylesheet_link_tag "leaflet-all", :media => "screen, print" %>
   <!--[if IE]>
diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb
index 81124455d..bb647b6a7 100644
--- a/config/initializers/assets.rb
+++ b/config/initializers/assets.rb
@@ -13,8 +13,8 @@ Rails.application.config.assets.manifest = Rails.root.join("tmp/manifest.json")
 # application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
 Rails.application.config.assets.precompile += %w( index.js browse.js welcome.js fixthemap.js )
 Rails.application.config.assets.precompile += %w( user.js diary_entry.js )
-Rails.application.config.assets.precompile += %w( large-ltr.css small-ltr.css print-ltr.css )
-Rails.application.config.assets.precompile += %w( large-rtl.css small-rtl.css print-rtl.css )
+Rails.application.config.assets.precompile += %w( screen-ltr.css print-ltr.css )
+Rails.application.config.assets.precompile += %w( screen-rtl.css print-rtl.css )
 Rails.application.config.assets.precompile += %w( leaflet-all.css leaflet.ie.css )
 Rails.application.config.assets.precompile += %w( id.js id.css )
 Rails.application.config.assets.precompile += %w( embed.js embed.css )