Merge pull request #746 from primer/fix-hide-utilities

Fix .hide utilities
primer · Apr 5, 2019 · d0616bc · d0616bc
2 parents c7fd221 + a463660
commit d0616bc
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/pages/css/utilities/layout.md b/pages/css/utilities/layout.md
@@ -85,9 +85,9 @@ Hide utilities are able to be applied or changed per breakpoint using the follow
 
 | Shorthand | Range |
 | --- | --- |
-| -sm | 0—544px |
-| -md | 544px—768px |
-| -lg | 768px—1004px |
+| -sm | 0—543px |
+| -md | 544px—767px |
+| -lg | 768px—1003px |
 | -xl | 1004px and above |
 
 ```html

diff --git a/src/utilities/visibility-display.scss b/src/utilities/visibility-display.scss
@@ -27,19 +27,19 @@ $display-values: (
 
 // Hide utilities for each breakpoint
 // Each hide utility only applies to one breakpoint range.
-@media (max-width: $width-sm) {
+@media (max-width: $width-sm - 1px) {
   .hide-sm {
     display: none !important;
   }
 }
 
-@media (min-width: $width-sm) and (max-width: $width-md) {
+@media (min-width: $width-sm) and (max-width: $width-md - 1px) {
   .hide-md {
     display: none !important;
   }
 }
 
-@media (min-width: $width-md) and (max-width: $width-lg) {
+@media (min-width: $width-md) and (max-width: $width-lg - 1px) {
   .hide-lg {
     display: none !important;
   }