title: Making a search box responsive with Media Queries?
body: <p>So far, this is my code. I want it to drop under my logo which is on the left to it, when i make the screen smaller. Thanks in advance guys! </p>
  
  <pre><code>@media screen and (max-width:959px){
  
      #wrapper{
          width: 100%;
      }
  
      #Search{
      width:40em;
      height: 3em;
  }
  
  }
  
  @media screen and (max-width:640px)
  {
  
      #Search{
      width:100%;
  
  }
  }
  
  
  
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Shiny Science&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="css.css"&gt;
      &lt;script src="js.js"&gt;&lt;/script&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content = "width=device-width, initial-scale=1.0"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="wrapper"&gt;
      &lt;header&gt;
          &lt;img id="mainLogo" src="images/mainlogo.jpg"&gt;
          &lt;select id="Select"&gt;
              &lt;option value="0"&gt;Menu&lt;/option&gt;
              &lt;option value="1"&gt;Home&lt;/option&gt;
              &lt;option value="2"&gt;Contact Us&lt;/option&gt;
              &lt;option value="3"&gt;About Us&lt;/option&gt;
          &lt;/select&gt;
  
      &lt;/header&gt;
  &lt;main&gt;
      &lt;h1&gt;Shiny Science&lt;/h1&gt;
      &lt;p id="description"&gt;Metusque innabilis, aestu manebat cum cuncta grandia sectamque iuga recessit cuncta. Metusque innabilis, aestu manebat cum cuncta grandia sectamque iuga recessit cuncta&lt;/p&gt;
      &lt;div id="searchbox"&gt;
      &lt;img src="images/monkey.jpg" id="secondaryLogo" alt="logo maybe"&gt;
      &lt;input type="text" name="txtSearch" placeholder="Topic Name" id="Search" &gt;&lt;input type="button" name="btnSearch" value="Search" id="searchButton"&gt;
      &lt;img src="images/turtle.png" alt="somethingkidscience" id="secondaryLogo2"&gt;
      &lt;/div&gt;
  &lt;/main&gt;
  &lt;footer&gt;
      &lt;div id="ep1"&gt;
      &lt;h2&gt;Episode 1&lt;/h2&gt;
      &lt;p class="caption"&gt;Metusque innabilis, aestu manebat cum cuncta grandia sectamque iuga recessit cuncta&lt;/p&gt;
      &lt;iframe  src="https://www.youtube.com/watch?v=W3s7UWpo35s?autoplay=1"&gt;&lt;p&gt;Your browser doesn't support iframe&lt;/p&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  &lt;div id="ep2"&gt;
      &lt;h2&gt;Episode 2&lt;/h2&gt;
      &lt;p class="caption"&gt;Metusque innabilis, aestu manebat cum cuncta grandia sectamque iuga recessit cuncta&lt;/p&gt;
      &lt;iframe src="https://www.youtube.com/watch?v=W3s7UWpo35s"&gt;&lt;p&gt;Your browser doesn't support iframe&lt;/p&gt;&lt;/iframe&gt;
  &lt;/div&gt;&lt;br&gt;
  &lt;a href="http://www.youtube.com"&gt;View all episodes&lt;/a&gt;
  &lt;/footer&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Sorry guys, I have updated this now there is the html and css i'm using </p>
  
  <pre><code>body{
      font-family: Arial, Verdana, sans-serif;
      font-size: 1.3em; 
      background: linear-gradient(red, yellow) repeat;
      text-align: center;
      color: #fff;
  }
  header{
      display: flex;
      justify-content: space-around;
      flex-wrap: nowrap;
      align-items: center;
      padding-top: 1em;
  }
  
  main,footer,header{
      border-bottom: 2px solid red;
      padding-bottom: 2em;
      text-align: center;
  }
  
  .caption{
      font-size: 0.5em;
  }
  
  #ep1, #ep2{
      display: inline-block;
      margin-left: 5em;
      margin-right: 5em;
  }
  
  #wrapper{
      margin: auto;
      width: 80%;
      background: linear-gradient(cyan,red);
  }
  
  #secondaryLogo{
      width: 15%;
  }
  #searchbox{
      display: flex;
      justify-content: space-around;
      flex-wrap: nowrap;
      align-items: center;
  }
  
  #Search{
      width:40em;
      height: 3em;
  }
  
  #contactHeader{
      padding-top: 1em;
      display: flex;
      justify-content: center;
      flex-wrap: nowrap;
      align-items: center;
      margin-bottom: 2em;
      overflow:auto;
  }
  
  h1, #description{
      margin: auto;
      width: 80%;
  }
  
  
  input[type=text], textarea{
      width:50%;
      float: left;
  }
  
  input[type=submit]{
  
  }
  
  #searchButton{
      height: 3em;
  }
  
  
  #mainLogo{
      width: 30%;
      margin-left: 25%;
  }
  
  #secondaryLogo2{
      float: right;
      width: 15%;
  }
  
  #us{
      width: 10%;
  }
  
  label{
      float: left;
      text-align: right;
      width: 35%;
      margin-right: 5%;
  }
  
  select{
      font-size: 1em;
      text-align: center;
  }
  
  
  #contactForm{
      width: 49%;
      border-right: 2px solid white;
      float: left;
      height: 30%;
  }
  #contactMethod{
      float: left;
      text-align: left;
      padding-left: 3em;
  }
  
  @media screen and (max-width:959px){
  
      #wrapper{
          width: 100%;
      }
  
      #Search{
      width:40em;
      height: 3em;
  }
  
  }
  
  @media screen and (max-width:640px)
  {
  
      #Search{
      width:100%; 
      height:150px;
      float:left;
  }
  
  
  img {
    width: 100%;
      max-width: 400px;
      height: auto;
  }
  
  }
  </code></pre>
  
  <p>I've been trying different things with the queries, but right now the only thing that works is the wrapper changes when i make my screen smaller.  </p>