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

This commit is contained in:
Mark Otto 2013-04-27 11:55:45 -07:00
parent 9ce7f22e99
commit 2ffa0e4409
3 changed files with 9 additions and 2 deletions

View File

@ -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;
}

View File

@ -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; }

View File

@ -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;