diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index fd40cdafb9..e389eaf6e9 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 69bb0dd7cb..f599f799f9 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -2003,17 +2003,35 @@ For example, <section>
should be wrapped as inline.
Resize your browser or load on different devices to test the responsive utility classes.
Green checkmarks indicate the element is visible in your current viewport.
-Here, green checkmarks indicate the element is hidden in your current viewport.