Responsive CSS for mobile searchbar

codeforboston · Jun 17, 2015 · 2a986e3 · 2a986e3
1 parent 42d0e08
commit 2a986e3
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/index.html b/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">

diff --git a/src/style.css b/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;