diff --git a/app/assets/stylesheets/framework/calendar.scss b/app/assets/stylesheets/framework/calendar.scss
index 8642b7530e25ca386058cb2a585700a092394d5d..81852158b941918811e3f12b546ebaad07a41685 100644
--- a/app/assets/stylesheets/framework/calendar.scss
+++ b/app/assets/stylesheets/framework/calendar.scss
@@ -2,7 +2,7 @@
   padding-left: 0;
   padding-right: 0;
 
-  @media (min-width: $screen-sm-min) and (max-width: $screen-lg-min) {
+  @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
     overflow-x: scroll;
   }
 }
diff --git a/app/assets/stylesheets/framework/flash.scss b/app/assets/stylesheets/framework/flash.scss
index a9006de6d3ee4c36a13b9b6d692120b7a5ca4a7b..eadb9409fee692d45d7967ceaf6b1175e173d34e 100644
--- a/app/assets/stylesheets/framework/flash.scss
+++ b/app/assets/stylesheets/framework/flash.scss
@@ -38,7 +38,7 @@
   }
 }
 
-@media (max-width: $screen-md-min) {
+@media (max-width: $screen-sm-max) {
   ul.notes {
     .flash-container.timeline-content {
       margin-left: 0;
diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index e83a1f7ad687256323924acf1abad4bcde57dc68..a01899ccbd234c4e8d046bf846e5c5d284d54fb8 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -98,7 +98,7 @@ label {
     }
   }
 
-  @media(max-width: $screen-sm-min) {
+  @media(max-width: $screen-xs-max) {
     padding: 0 $gl-padding;
 
     .control-label,
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 16ecf466931181d8e7c4cf69d0a8e27e3bede172..f9bcbbf2ca5a3764aff057da7afb3d4710d93645 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -228,7 +228,7 @@ header {
 }
 
 .page-sidebar-pinned.right-sidebar-expanded {
-  @media (max-width: $screen-lg-min) {
+  @media (max-width: $screen-md-max) {
     .header-content .title {
       width: 300px;
     }
diff --git a/app/assets/stylesheets/framework/pagination.scss b/app/assets/stylesheets/framework/pagination.scss
index cb2c351c3688506162c967e5e6d062718086ceb1..b37c1d0d670a39c3edef7099b76d6924b789656c 100644
--- a/app/assets/stylesheets/framework/pagination.scss
+++ b/app/assets/stylesheets/framework/pagination.scss
@@ -43,7 +43,7 @@
 /**
  * Small screen pagination
  */
-@media (max-width: $screen-xs) {
+@media (max-width: $screen-xs-min) {
   .gl-pagination {
     .pagination li a {
       padding: 6px 10px;
@@ -62,7 +62,7 @@
 /**
  * Medium screen pagination
  */
-@media (min-width: $screen-xs) and (max-width: $screen-md-max) {
+@media (min-width: $screen-xs-min) and (max-width: $screen-md-max) {
   .gl-pagination {
     .page {
       display: none;
diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss
index 498a8f68e4993ae268c9b1f3ee92d9922b22e015..0b4930ec98f73bbc268a181fcadb95a72315ebb9 100644
--- a/app/assets/stylesheets/pages/cycle_analytics.scss
+++ b/app/assets/stylesheets/pages/cycle_analytics.scss
@@ -53,7 +53,7 @@
       border-bottom: none;
       position: relative;
 
-      @media (max-width: $screen-sm-min) {
+      @media (max-width: $screen-xs-max) {
         padding: 6px 0 24px;
       }
     }
@@ -61,7 +61,7 @@
     .column {
       text-align: center;
 
-      @media (max-width: $screen-sm-min) {
+      @media (max-width: $screen-xs-max) {
         padding: 15px 0;
       }
 
@@ -78,7 +78,7 @@
       }
 
       &:last-child {
-        @media (max-width: $screen-sm-min) {
+        @media (max-width: $screen-xs-max) {
           text-align: center;
         }
       }
@@ -156,7 +156,7 @@
     }
 
     .inner-content {
-      @media (max-width: $screen-sm-min) {
+      @media (max-width: $screen-xs-max) {
         padding: 0 28px;
         text-align: center;
       }
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index 4b382e8adaf633718bf4b0f4397bfb891bdd7292..de3d2ba549fae5a2c5723667981a6bfec74c0b77 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -8,7 +8,7 @@
   font-size: 34px;
 }
 
-@media (max-width: $screen-sm-min) {
+@media (max-width: $screen-xs-max) {
   .environments-container {
     width: 100%;
     overflow: auto;
diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss
index 57d028cec8ce2ce4b63d8b4829b8ec897859e69d..a9af7af59e23b98e93e65fcb51a0c5a23f48d56d 100644
--- a/app/assets/stylesheets/pages/groups.scss
+++ b/app/assets/stylesheets/pages/groups.scss
@@ -49,14 +49,14 @@
   padding: 50px 100px;
   overflow: hidden;
 
-  @media (max-width: $screen-md-min) {
+  @media (max-width: $screen-sm-max) {
     padding: 50px 0;
   }
 
   svg {
     float: right;
 
-    @media (max-width: $screen-md-min) {
+    @media (max-width: $screen-sm-max) {
       float: none;
       display: block;
       width: 250px;
@@ -71,7 +71,7 @@
     width: 460px;
     margin-top: 120px;
 
-    @media (max-width: $screen-md-min) {
+    @media (max-width: $screen-sm-max) {
       float: none;
       margin-top: 60px;
       width: auto;
diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss
index 8843d1463db08222f87bcdc1a682e84344a1d970..dfc6079bd151df951b5bc9034bcf90bcedae5992 100644
--- a/app/assets/stylesheets/pages/milestone.scss
+++ b/app/assets/stylesheets/pages/milestone.scss
@@ -123,7 +123,7 @@
   padding: 20px 0;
 }
 
-@media (max-width: $screen-sm-min) {
+@media (max-width: $screen-xs-max) {
   .milestone-actions {
     @include clearfix();
     padding-top: $gl-vert-padding;
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 16ddef481bd362f119fde963a9268bb56ba70321..65775c45e5b91cd5bf41d76143fa6424389f356c 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -111,7 +111,7 @@
   text-align: center;
   font-size: 13px;
 
-  @media (max-width: $screen-md-min) {
+  @media (max-width: $screen-sm-max) {
     // On smaller devices the warning becomes the fourth item in the list,
     // rather than centering, and grows to span the full width of the
     // comment area.
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 15ec8be831e1c8d7e763ae87b5c5e4f392066874..56a798a7b6dff8664948e4bd07b6f760ee4923f7 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -253,7 +253,7 @@ ul.notes {
 }
 
 .page-sidebar-pinned.right-sidebar-expanded {
-  @media (max-width: $screen-lg-min) {
+  @media (max-width: $screen-md-max) {
     .note-header {
       .note-headline-light {
         display: block;
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index 6fab97a71aacf411c8e094108c16bca3f361d2ff..f8677f93fe045b8bb5124b91f2e6f163705421bb 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -180,7 +180,7 @@
   .modal-dialog {
     width: 380px;
 
-    @media (max-width: $screen-sm-min) {
+    @media (max-width: $screen-xs-max) {
       width: auto;
     }
 
@@ -261,4 +261,4 @@ table.u2f-registrations {
   td:not(:last-child) {
     border-right: solid 1px transparent;
   }
-}
\ No newline at end of file
+}
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 0562ee7b178824ef424ef28ebdba24904ea43624..1cf7587dbb4d34be2131ba1a71986095966bce12 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -189,7 +189,7 @@
   }
 
   .download-button {
-    @media (max-width: $screen-lg-min) {
+    @media (max-width: $screen-md-max) {
       margin-left: 0;
     }
   }
diff --git a/app/assets/stylesheets/pages/stat_graph.scss b/app/assets/stylesheets/pages/stat_graph.scss
index 69288b31cc4299794d97dfe0551f062e066fdd53..779db77da607f541597c355b9a1c378a2f1899b4 100644
--- a/app/assets/stylesheets/pages/stat_graph.scss
+++ b/app/assets/stylesheets/pages/stat_graph.scss
@@ -37,7 +37,7 @@
     @include make-md-column(6);
     margin-top: 10px;
 
-    @media (max-width: $screen-sm-min) {
+    @media (max-width: $screen-xs-max) {
       width: 100%;
     }
   }
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index 2b836fa1f4adeffa3c19a0866e9260b028abeb9e..20ad63be0458014cd4ba662f373a177330a4bd15 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -31,7 +31,7 @@
       .last-commit {
         @include str-truncated(506px);
 
-        @media (min-width: $screen-sm-max) and (max-width: $screen-md-max) {
+        @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
           @include str-truncated(450px);
         }