made 'connect with us' sectoin responsive (#215)

publiclab · May 31, 2019 · 4da40fc · 4da40fc
1 parent 871d062
commit 4da40fc
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 6 deletions.
diff --git 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
@@ -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>