responsive on mobile

css/style.css

@@ -360,7 +360,7 @@ input:focus {
   list-style-type: none;
   margin: 0;
   height: 60px;
-  display: block;
+  display: flex;
   float: left;
   font-family: "Irma",sans-serif;
   font-style: Normal;
@@ -401,3 +401,25 @@ input:focus {
 .main-nav li a:hover {
   color: #ff5e99;
 }
+
+.responsive {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-left;
+}
+
+/* Medium screens */
+@media all and (max-width: 800px) {
+  .responsive {
+    /* When on medium sized screens, we center it by evenly distributing empty space around items */
+    justify-content: space-around;
+  }
+}
+
+/* Small screens */
+@media all and (max-width: 500px) {
+  .responsive {
+    /* On small screens, we are no longer using row direction but column */
+    flex-direction: space-around;
+  }
+}

index.html

@@ -33,7 +33,7 @@
 
     <section class="region-header headroom headroom--top">
 
-      <div class="wrapper">
+      <div class="wrapper responsive">
         <ul class="main-nav">
 
           <li class="x-toplevel"><a href="https://itp.nyu.edu">About ITP</a></li>
@@ -85,14 +85,14 @@ <h4 class="modal-title" id="exampleModalLabel">Project Title</h4>
       <div class="row">
         <div class="col-md-12">
           <h1 class="centered">ITP Projects Finder</h1>
-          <div class="centered"><input id="theInput" placeholder="Type Keywords/Names and Press Enter" autofocus></div>
+          <div class="centered"><input id="theInput" placeholder="Type Keywords / Names" autofocus></div>
           <button class="button button-royal button-circle button-giant" id="searchBtn"><i class="fa fa-search" aria-hidden="true"></i></button>
         </div>
       </div>
 
       <div class="row">
         <div class="col-md-12">
-          <div>
+          <div class="responsive">
             <a class='keys' id="wearable">Wearable</a>
             <a class='keys' id="pcomp">Physical Computing</a>
             <a class='keys' id="computArt">Computational Art</a>

js/main.js

@@ -90,7 +90,7 @@ function getProjectById(objAuthor) {
 }
 
 function addCard(obj) {
-  // console.log('add card');
+  console.log(obj);
   $("#card-holder").empty();
   $("#mainImage").empty();
   obj.sort(function(a, b) {