Simple responsive utilities test css

2 files changed, 36 insertions, 21 deletions

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index fd40cdafb..e389eaf6e 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -510,28 +510,25 @@ body {
   position: relative;
   float: left;
   width: 25%;
-  padding: 15px 10px;
-  font-size: 14px;
-  font-weight: bold;
-  line-height: 1.1;
-  color: #999;
-  text-align: center;
-  border: 1px solid #ddd;
-  border-radius: 4px;
 }
 .responsive-utilities-test li + li {
   margin-left: 10px;
 }
 .responsive-utilities-test span {
-  position: absolute;
-  top:    -1px;
-  left:   -1px;
-  right:  -1px;
-  bottom: -1px;
   padding: 15px 10px;
+  font-size: 14px;
+  font-weight: bold;
+  line-height: 1.1;
+  text-align: center;
   border-radius: 4px;
 }
-.responsive-utilities-test span {
+.responsive-utilities-test.visible-on [class*="hidden"],
+.responsive-utilities-test.hidden-on [class*="visible"] {
+  color: #999;
+  border: 1px solid #ddd;
+}
+.responsive-utilities-test.visible-on [class*="visible"],
+.responsive-utilities-test.hidden-on [class*="hidden"] {
   color: #468847;
   background-color: #dff0d8;
   border: 1px solid #d6e9c6;
diff --git a/docs/css.html b/docs/css.html
index 69bb0dd7c..f599f799f 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -2003,17 +2003,35 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <p>Resize your browser or load on different devices to test the responsive utility classes.</p>
     <h4>Visible on...</h4>
     <p>Green checkmarks indicate the element <strong>is visible</strong> in your current viewport.</p>
-    <ul class="responsive-utilities-test">
-      <li>Small<span class="visible-sm">&#10004; Visible on small</span></li>
-      <li>Medium<span class="visible-md">&#10004; Visible on medium</span></li>
-      <li>Large<span class="visible-lg">&#10004; Visible on large</span></li>
+    <ul class="responsive-utilities-test visible-on">
+      <li>
+        <span class="hidden-sm">Small</span>
+        <span class="visible-sm">&#10004; Visible on small</span>
+      </li>
+      <li>
+        <span class="hidden-md">Medium</span>
+        <span class="visible-md">&#10004; Visible on medium</span>
+      </li>
+      <li>
+        <span class="hidden-lg">Large</span>
+        <span class="visible-lg">&#10004; Visible on large</span>
+      </li>
     </ul>
     <h4>Hidden on...</h4>
     <p>Here, green checkmarks indicate the element <strong>is hidden</strong> in your current viewport.</p>
     <ul class="responsive-utilities-test hidden-on">
-      <li>Small<span class="hidden-sm">&#10004; Hidden on small</span></li>
-      <li>Medium<span class="hidden-md">&#10004; Hidden on medium</span></li>
-      <li>Large<span class="hidden-lg">&#10004; Hidden on desktop</span></li>
+      <li>
+        <span class="visible-sm">Small</span>
+        <span class="hidden-sm">&#10004; Hidden on small</span>
+      </li>
+      <li>
+        <span class="visible-md">Medium</span>
+        <span class="hidden-md">&#10004; Hidden on medium</span>
+      </li>
+      <li>
+        <span class="visible-lg">Large</span>
+        <span class="hidden-lg">&#10004; Hidden on desktop</span>
+      </li>
     </ul>
 
   </div>