From 4da40fc57e251be847624a0b15068b9ed3a085f1 Mon Sep 17 00:00:00 2001
From: Juneau <33215669+ljuneaul@users.noreply.github.com>
Date: Fri, 31 May 2019 12:38:03 -0400
Subject: [PATCH] made 'connect with us' sectoin responsive (#215)

---
 examples/demo.css | 26 +++++++++++++++++++++++++-
 index.html        | 10 +++++-----
 2 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/examples/demo.css b/examples/demo.css
index f9e238f7..e32201c8 100644
--- a/examples/demo.css
+++ b/examples/demo.css
@@ -77,5 +77,29 @@ h1, h2, .section h3 {
 }
 
 #connectwithusbody {
-    overflow: hidden;
+    margin: auto;
+    width: 80%;
+    display: flex;
+    flex-wrap: wrap;
+    flex-shrink: initial;
+    background-color: yellow;
+}
+
+.links {
+    width: 20%;
+    margin: 10px;
+    text-align: center;
+}
+
+@media only screen and (max-width: 569px) {
+    .links {
+        width: 25%;
+        margin: 10px 0;
+    }
+}
+
+@media only screen and (max-width: 400px) {
+    .links {
+        width: 50%;
+    }
 }
diff --git a/index.html b/index.html
index 30cf37e4..87fc49cb 100644
--- a/index.html
+++ b/index.html
@@ -148,11 +148,11 @@ <h2 class="contributors-head">Contributors</h2>
 	  <div class="row" id="connectwithus">
 		<h2 class="text-center d-block">Connect with us</h2>
 		<p>You can connect with us on any of these platforms:</p>
-	  <div class="text-center" id="connectwithusbody">
-		  <a class="col-md-2" href="https://www.facebook.com/PublicLab/" title="Facebook" ><i class="fa fa-facebook fa-3x"></i> </a>
-		  <a class="col-md-2" href="https://twitter.com/PublicLab?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor" title="Twitter" ><i class="fa fa-twitter fa-3x"></i> </a>
-		  <a class="col-md-2" href="https://github.com/publiclab" title="Organization" ><i class="fa fa-github fa-3x"></i> </a>
-		  <a class="col-md-2" href="https://publiclab.org" title="Publiclab Website"><i class="fa fa-globe fa-3x"></i></a>
+	  <div id="connectwithusbody">
+		  <a class="col-md-2 links" href="https://www.facebook.com/PublicLab/" title="Facebook" ><i class="fa fa-facebook fa-3x"></i> </a>
+		  <a class="col-md-2 links" href="https://twitter.com/PublicLab?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor" title="Twitter" ><i class="fa fa-twitter fa-3x"></i> </a>
+		  <a class="col-md-2 links" href="https://github.com/publiclab" title="Organization" ><i class="fa fa-github fa-3x"></i> </a>
+		  <a class="col-md-2 links" href="https://publiclab.org" title="Publiclab Website"><i class="fa fa-globe fa-3x"></i></a>
 	  </div>
 	</div>
     </div>