fix(docs): make buttons display block on xs views (#46)

eddywashere · web-flow · commit fd142923f334 · 2016-06-26T08:54:15.000-07:00
diff --git a/docs/lib/Home/index.jsx b/docs/lib/Home/index.jsx
@@ -22,7 +22,7 @@ export default () => {
               </p>
               <p>
                 <Button color="danger-outline" href="https://github.com/reactstrap/reactstrap">View on Github</Button>
-                <Button color="danger" tag={Link} to="/components/" className="m-l-1">View Components</Button>
+                <Button color="danger" tag={Link} to="/components/">View Components</Button>
               </p>
             </Col>
           </Row>
diff --git a/docs/static/docs.css b/docs/static/docs.css
@@ -6,6 +6,21 @@
   margin-bottom: 0
 }
 
+.jumbotron .btn {
+  margin-right: 1rem;
+}
+
+.jumbotron .btn + .btn {
+  margin-right: 0;
+}
+
+@media (max-width: 543px) {
+  .jumbotron .btn {
+    display: block;
+    margin: 0 0 1rem 0;
+  }
+}
+
 .content {
   margin-top: 2rem;
 }
