diff options
| author | Mark Otto <[email protected]> | 2013-04-27 11:55:45 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2013-04-27 11:55:45 -0700 |
| commit | 2ffa0e44094ab67e23fb1642d6b1b8d269d3a2f1 (patch) | |
| tree | 35987ba5778b0b1301119e9ffac41e757a880765 | |
| parent | 9ce7f22e991804cd08c4dc612cd929d07dc0a28f (diff) | |
| download | bootstrap-2ffa0e44094ab67e23fb1642d6b1b8d269d3a2f1.tar.xz bootstrap-2ffa0e44094ab67e23fb1642d6b1b8d269d3a2f1.zip | |
Add maximum bounds variables for so our responsive utilities don't overlap
| -rw-r--r-- | docs/assets/css/bootstrap.css | 2 | ||||
| -rw-r--r-- | less/responsive-utilities.less | 2 | ||||
| -rw-r--r-- | less/variables.less | 7 |
3 files changed, 9 insertions, 2 deletions
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 2b4ca441f..be8236ea3 100644 --- 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 9cea0cef6..c69851bb9 100644 --- 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 e09547e8a..6cd5b2a48 100644 --- 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; |