Add maximum bounds variables for so our responsive utilities don't overlap

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 2b4ca441f314e9ecfdefee2ff3f481bc4cecf150..be8236ea37db0c3db555e2ac5281c7ec8be11eee 100644 (file)
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -5341,7 +5341,7 @@ a.list-group-item.active > .badge,
   display: inherit !important;
 }
 
-@media (min-width: 768px) and (max-width: 992px) {
+@media (min-width: 768px) and (max-width: 991px) {
   .visible-phone {
     display: none !important;
   }

diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less
index 9cea0cef6eb021d4ad91f5527c72aa162c78a9fa..c69851bb96b9302da44f175aa40596a399b7e450 100644 (file)
--- a/less/responsive-utilities.less
+++ b/less/responsive-utilities.less
@@ -46,7 +46,7 @@
 
 
 // Tablets & small desktops only
-@media (min-width: @screen-tablet) and (max-width: @screen-desktop) {
+@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
   .visible-phone    { display: none !important; }
   .visible-tablet    { display: inherit !important; }
   .visible-desktop   { display: none !important; }

diff --git a/less/variables.less b/less/variables.less
index e09547e8aa0d44a1dc741df332d27c4c2617539a..6cd5b2a485fbf91eab691f503f57dcc15a4ad792 100644 (file)
--- a/less/variables.less
+++ b/less/variables.less
@@ -375,12 +375,19 @@
 // Tiny screen / phone
 @screen-tiny:                480px;
 @screen-phone:               @screen-tiny;
+
 // Small screen / tablet
 @screen-small:               768px;
 @screen-tablet:              @screen-small;
+
 // Medium screen / desktop
 @screen-medium:              992px;
 @screen-desktop:             @screen-medium;
+
+// So media queries don't overlap when required, provide a maximum
+@screen-small-max:           (@screen-medium - 1);
+@screen-tablet-max:          @screen-small-max;
+
 // Large screen / wide desktop
 @screen-large:               1200px;
 @screen-large-desktop:       @screen-large;