Simple responsive utilities test css

1 files changed, 11 insertions, 14 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;