title: Removing And Adding Elements Based On Window Width Using jQuery Doesn't Work
body: <p>As far as I can tell I have set up my jQuery so that it removes some elements when the window gets too small and puts them back when it gets larger again. Without the code that appends the elements, they remove themselves fine. But with the append code they never disappear. In addition, the jQuery window.width() seems to be different than that of my css media queries. Thanks in advance.</p>
  
  <p>Here is my jQuery:</p>
  
  <pre><code>$(window).resize(function () {
  
  if ($(window).width() &lt; 719) {
  
      $("#logo").remove();
      $("nav").remove();
  
  
  }
  
  else if($(window).width() &gt; 719) {
  
      $("header").append("&lt;nav&gt;
  
                              &lt;ul&gt;
  
                                  &lt;li&gt;&lt;a href = 'index.php' class='&lt;?php if ($section == 'About') { echo 'selected'; }?&gt;'&gt;About&lt;/a&gt;&lt;/li&gt;
                                  &lt;li class = 'greyed-out'&gt;/&lt;/li&gt;
                                  &lt;li&gt;&lt;a href = 'work.php' class='&lt;?php if ($section == 'Work') { echo 'selected'; } ?&gt;''&gt;Work&lt;/a&gt;&lt;/li&gt;
                                  &lt;li class = 'greyed-out'&gt;/&lt;/li&gt;
                                  &lt;li&gt;&lt;a href = 'contact.php' class='&lt;?php if ($section == 'Contact') { echo 'selected'; } ?&gt;''&gt;Contact&lt;/a&gt;&lt;/li&gt;
  
                              &lt;/ul&gt;
  
                          &lt;/nav&gt;");
  
      //&lt;div id = "logo"&gt;&lt;img src = "img/logo.png"&gt;&lt;/div&gt;
  }
  
  });
  </code></pre>
  
  <p>Here are my media queries. I had to fiddle around with the jQuery widths in my if statement to get the elements to disappear and corresponding styling to be applied roughly at the same time (719 px != 738):</p>
  
  <pre><code>@media(min-width: 1250px) {
  
  #skills-container {
  
      margin-left: auto;
      margin-right: auto;
  
      max-width: 810px;
  }
  }
  
  
  @media(max-width: 738px) {
  
  html {
  
      width: 100%;
      background-image: none;
      border: none;
  
  }
  
  .wrapper {
  
      width: 100%;
      margin-left: 0;
  }
  
  .page-section, footer {
  
      width: 98%;
      margin-left: 1%;
  }
  
  header {
  
      width: 100%;
      margin: 0;
      background-color: #00bf8a;
  
  }
  }
  </code></pre>