Responsive CSS for mobile searchbar

Author: donmccurdy

index.html

@@ -52,14 +52,16 @@
         </button>
         <a class="navbar-brand" href="#"><h2>Ungentry</h2></a>
       </div>
-      <div id="navbar" class="navbar-collapse collapse" style="padding-right: 0px;">
+      <div id="navbar" class="navbar-collapse collapse">
 
 
         <form class="navbar-form navbar-right" role="search">
-          <div class="form-group">
+          <div class="input-group">
             <input type="text" id="address" class="form-control" placeholder="Search for addresses">
+            <span class="input-group-btn">
+              <button type="button" id="sendaddress" class="btn btn-default">Submit</button>
+            </span>
           </div>
-          <button type="button" id="sendaddress" class="btn btn-default">Submit</button>
         </form>
 
         <ul class="nav navbar-nav navbar-right">

src/style.css

@@ -36,9 +36,15 @@ footer {
     margin-top: -10px;
 }
 
-.navbar-form {
-    padding-right: 0px;
+@media (min-width: 768px) {
+    .navbar-collapse {
+        padding-right: 0px;
+    }
+    .navbar-form {
+        padding-right: 0px;
+    }
 }
+
 /*
 .navbar-nav>li>a {
     padding-top: 10px;