title: Responsive CSS: Prevent a search bar and button from getting bigger when zoomed in?
body: <p>I have created a responsive website about a year ago and took a Big Commerce theme and altered it to be my own. I have put a button next to a search bar in the header. To test responsiveness I zoom in and out to see what happens. When I do, the search bar and button seem to move around quite a bit and get bigger. I would like it to stay put like the header, bag button and phone number. Here is my code...</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* CSS */
  #SearchForm2 {
      position: absolute;
      right: 0;
      top: 3%;
      z-index: 52;
      width: 25%;
      height: auto;
      display: block;
  }
  #SearchForm2 form {
      padding: 0;
      margin: 0;
      display: block;
  }
  #SearchForm2 label {
      display: none;
  }
  #SearchForm2 input {
      display: block;
      height: auto; 
      width: auto;
      font-weight: 400;
      text-transform: uppercase;
      padding: 2px 3px 2px 3px;
  }
  #SearchForm2 p {
      display: none;
      margin: 5px 0 0 0;
  }
  #SearchForm2 input.Textbox {
      float: right;
      font-size: 100%;
      width: 59%;
      height: auto;
      display: block;
      padding: .5em 1em;           
      text-transform: none;
      line-height: 17px;
      background-color: transparent; 
      border: 1px solid #000;
      vertical-align: middle;
  }
  .searchbtn2 {
      float: right;
      width: 39%;
      height: auto;
      font-size: 100%;
      display: block;
      margin: 0px 3px 0 0;
      cursor: pointer;
      font-weight: 500;
      text-transform:uppercase;
      font-family: "Cabin", Arial, Sans-serif;
       *display: inline;
       *zoom:1;
      text-align: center;
      vertical-align: middle;
      border: none;
      padding: 5px 10px 4px 10px;
      -webkit-border-radius: 0;
      border-radius: 0;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      border-radius:3px;
      -webkit-border-radius:3px;
      -moz-border-radius:3px;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      transition: all 0.3s;
      background-color: #454545;
      color: #fff;
      border: 2px solid #454545;
  }
  .searchbtn2:hover {
      background-color: #ffffff;
      color: #000;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Header Search --&gt;
  &lt;div id="SearchForm2"&gt;
    &lt;form action="%%GLOBAL_ShopPath%%/search.php" method="get" onsubmit="return check_small_search_form(this)"&gt;
    &lt;label for="search_query"&gt;%%LNG_Search%%&lt;/label&gt;
      
      &lt;input type="text" name="search_query" id="search_query" class="Textbox autobox" value="%%LNG_Search%%" /&gt;
  
      &lt;button type="submit" class="searchbtn2" name="Search" title="Search"&gt;Search&lt;/button&gt;
    &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is a link to see it in action: <a href="https://www.luxuryeyesite.com/test3/" rel="nofollow">https://www.luxuryeyesite.com/test3/</a></p>