Merge pull request #7092 from michael-wilson/patch-1

Update _visibility.scss

scss/components/_visibility.scss

@@ -16,14 +16,30 @@
 /// Hide an element by default, only displaying it within a certain breakpoint.
 /// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**
 @mixin show-for-only($size) {
-  $lower-bound: -zf-bp-to-em(map-get($breakpoints, $size)) - (1/16);
-  $upper-bound: -zf-bp-to-em(-zf-map-next($breakpoints, $size));
+  $lower-bound-size: map-get($breakpoints, $size);
+  $upper-bound-size: -zf-map-next($breakpoints, $size);
+
+  // more often than not this will be correct, just one time round the loop it won't so set in scope here
+  $lower-bound: -zf-bp-to-em($lower-bound-size) - (1/16);
+  // test actual lower-bound-size, if 0 set it to 0em
+  @if $lower-bound-size == 0 {
+    $lower-bound: -zf-bp-to-em($lower-bound-size);
+  }
 
-  @media screen and (max-width: $lower-bound), screen and (min-width: $upper-bound) {
-    display: none !important;
+  @if $upper-bound-size == null {
+    @media screen and (max-width: $lower-bound) {
+      display: none !important;
+    }
+  }
+  @else {
+    $upper-bound: -zf-bp-to-em($upper-bound-size);
+    @media screen and (max-width: $lower-bound), screen and (min-width: $upper-bound) {
+      display: none !important;
+    }
   }
 }
 
+
 /// Show an element by default, and hide it above a certain screen size.
 /// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**
 @mixin hide-for($size) {