tweaks to layout to make it more responsive

src/scripts/search.tag

@@ -1,26 +1,32 @@
 <search>
   <form class="form-horizontal search-form" onsubmit={ submit } type="submit"method="get">
+
     <div class="form-group">
+
         <div class="container">
           <div class="columns">
-            <div class="col-sm-8 form-item">
+            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
               <input onfocus={ showhelp }
-                     class="form-input"
+                     class="form-input search"
                      placeholder="Description"
                      type="text"
-                     name="title"/>
-            </div>
-            <div class="col-sm-2 form-item">
-              <select class="form-select" aria-labelledby="dLabel" name="sem">
-                <option value="Fall">Fall</option>
-                <option value="Winter" selected>Winter</option>
-                <option value="Spring/Summer">Spring/Summer</option>
-              </select>
-            </div>
-            <div class="col-sm-2 form-item">
-              <button class="btn btn-primary" type="submit">Search</button>
+                     name="title">
+              </input>
             </div>
           </div>
+
+            <div class="columns">
+              <div class="col-sm-6 col-md-6 col-lg-6">
+                <select class="semester form-select pull-right" aria-labelledby="dLabel" name="sem">
+                  <option value="Fall">Fall</option>
+                  <option value="Winter" selected>Winter</option>
+                  <option value="Spring/Summer">Spring/Summer</option>
+                </select>
+              </div>
+              <div class="col-sm-6 col-md-6 col-lg-6">
+                <button class="search-btn btn btn-primary pull-left" type="submit">Search</button>
+              </div>
+            </div>
         </div>
     </div>
   </form>

src/styles/search.scss

@@ -4,6 +4,10 @@ header {
   color: $blue;
 }
 
+.form-group {
+  margin: auto;
+}
+
 .wraptext {
   white-space: pre-wrap !important;
 }
@@ -77,17 +81,43 @@ a {
   margin-right: 0px !important;
 }
 
-.form-item {
-  padding-left: 5px;
-  padding-right: 5px;
-  margin-right: -15px;
+.search {
+  max-width: 60%;
+  margin-bottom: 10px;
+  margin-left: auto;
+  margin-right: auto;
+  @media (max-width: 735px) {
+    max-width: 80%;
+  }
+  @media (max-width: 480px) {
+    max-width: 100%;
+    margin-bottom: 10px;
+  }
+}
+
+.semester {
+  margin-bottom: 10px;
+  @media (max-width: 480px) {
+    max-width: 100%;
+    margin-bottom: 10px;
+  }
+}
+
+.search-btn {
+  margin-bottom: 10px;
+  @media (max-width: 480px) {
+    max-width: 100%;
+    margin-bottom: 10px;
+  }
+}
+
+.search-controls {
+  margin-top: 5px;
+  margin-left: 20%;
 }
 
 .title {
   font-weight: bolder;
-  @media (min-width: 480px) {
-    margin-left: 80px;
-  }
 }
 
 .ui-autocomplete {
@@ -141,7 +171,7 @@ a {
 
 .page-top {
   font-size: 15px;
-  width: 50% !important;
+  width: 80% !important;
 }
 
 .help-toast {

src/templates/search.html

@@ -3,17 +3,17 @@
   {{super()}}
   <meta name="viewport" content="width=device-width, initial-scale=1">
 <header class="text-center nav navbar">
-  <section class="centered page-top navbar-section">
+  <section class="page-top navbar-section">
     <div class="container">
       <div class="columns">
-        <div class="title column col-md-9"><h1>TextBook Commons</h1></div>
-        <div class="logo column col-md-3">
-          <figure class="avatar avatar-xl">
-          </figure>
+        <div class="title col-sm-12 col-md-12 col-lg-12"><h1>TextBook Commons</h1></div>
+      </div>
+      <div class="columns">
+        <div class="title col-sm-12 col-md-12 col-lg-12">
+          <h5>Search for your course and start saving money on your books</h5>
         </div>
       </div>
     </div>
-    <h5>Search for your course and start saving money on your books</h5>
     <search></search>
   </section>
 </header>