From 7071fe9c1ba90c2ab645b088a51eaf036a22edda Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 12 Jun 2016 21:18:23 -0700
Subject: [PATCH] Fixes #17089 a bit
---
docs/assets/scss/_responsive-tests.scss | 1 +
docs/layout/responsive-utilities.md | 19 ++++++++++++++-----
2 files changed, 15 insertions(+), 5 deletions(-)
diff --git a/docs/assets/scss/_responsive-tests.scss b/docs/assets/scss/_responsive-tests.scss
index 79fe721bb7..edba088c69 100644
--- a/docs/assets/scss/_responsive-tests.scss
+++ b/docs/assets/scss/_responsive-tests.scss
@@ -36,6 +36,7 @@
margin-top: .25rem;
}
.responsive-utilities-test .col-xs-6 {
+ margin-top: .5rem;
margin-bottom: .5rem;
}
.responsive-utilities-test span {
diff --git a/docs/layout/responsive-utilities.md b/docs/layout/responsive-utilities.md
index 839aeeb24a..2a44fd589e 100644
--- a/docs/layout/responsive-utilities.md
+++ b/docs/layout/responsive-utilities.md
@@ -188,6 +188,9 @@ Green checkmarks indicate the element **is visible** in your current viewport.
<span class="hidden-lg-down not-visible">Large or narrower</span>
</div>
</div>
+
+<hr>
+
<div class="row responsive-utilities-test visible-on">
<div class="col-xs-6 col-sm-3">
<span class="hidden-xs-down visible">✔ Visible on small or wider</span>
@@ -206,24 +209,30 @@ Green checkmarks indicate the element **is visible** in your current viewport.
<span class="hidden-xl-up not-visible">Extra large</span>
</div>
</div>
+
+<hr>
+
<div class="row responsive-utilities-test visible-on">
- <div class="col-xs-6 col-sm-3">
+ <div class="col-xs-6 col-sm-4">
<span class="hidden-sm-up visible">✔ Your viewport is exactly extra small</span>
<span class="hidden-xs-down not-visible">Your viewport is NOT exactly extra small</span>
</div>
- <div class="col-xs-6 col-sm-3">
+ <div class="col-xs-6 col-sm-4">
<span class="hidden-xs-down hidden-md-up visible">✔ Your viewport is exactly small</span>
<span class="hidden-sm-only not-visible">Your viewport is NOT exactly small</span>
</div>
- <div class="col-xs-6 col-sm-3">
+ <div class="col-xs-6 col-sm-4">
<span class="hidden-sm-down hidden-lg-up visible">✔ Your viewport is exactly medium</span>
<span class="hidden-md-only not-visible">Your viewport is NOT exactly medium</span>
</div>
- <div class="col-xs-6 col-sm-3">
+ </div>
+
+<div class="row responsive-utilities-test visible-on">
+ <div class="col-xs-6 col-sm-4">
<span class="hidden-md-down hidden-xl-up visible">✔ Your viewport is exactly large</span>
<span class="hidden-lg-only not-visible">Your viewport is NOT exactly large</span>
</div>
- <div class="col-xs-6 col-sm-3">
+ <div class="col-xs-6 col-sm-4">
<span class="hidden-lg-down visible">✔ Your viewport is exactly extra large</span>
<span class="hidden-xl-only not-visible">Your viewport is NOT exactly extra large</span>
</div>
--
GitLab