center example sites in docs on mobile

1 files changed, 20 insertions, 0 deletions

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 73e619d29..9324f9990 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -323,6 +323,11 @@ h2 + table {
 -------------------------------------------------- */
 @media (max-width: 480px) {
 
+  /* Reduce padding above jumbotron */
+  body {
+    padding-top: 70px;
+  }
+
   /* Change up some type stuff */
   h1 small {
     display: block;
@@ -362,6 +367,21 @@ h2 + table {
   .quick-links {
     margin: 40px 0 0;
   }
+  /* hide the bullets on mobile since our horizontal space is limited */
+  .quick-links .divider {
+    display: none;
+  }
+
+  /* center example sites */
+  .example-sites {
+    margin-left: 0;
+  }
+  .example-sites a {
+    float: none;
+    display: block;
+    max-width: 300px;
+    margin: 0 auto 18px;
+  }
 
 }