title: $(window).width() is not able to work perfectly for size above 500px and below 500px
body: <p>My code is as shown below:</p>
  
  <pre><code>if ($(window).width() &gt; 500) {
      $("#about-us .q-team .q-team-layout .q-jyoti-layout").hover(function() {
          $("#about-us .q-team .q-team-layout .q-jyoti-layout .q-jyoti-info").css("display", "block");
  
      }, function() {
          $("#about-us .q-team .q-team-layout .q-jyoti-layout .q-jyoti-info").css("display", "none");
  
      });
  }else if ($(window).width() &lt;= 500) {
      $("#about-us .q-team .q-team-layout .q-jyoti-layout").hover(function() {
          $("#about-us .q-team .q-team-layout .q-xzz").css("display", "block");
  
      }, function() {
          $("#about-us .q-team .q-team-layout .q-xzz").css("display", "none");
  
      });
  }
  </code></pre>
  
  <p>My Html code is as shown below:</p>
  
  <pre><code>&lt;div class="q-team-layout"&gt;
                  &lt;div class="q-jyoti-layout"&gt;
                      &lt;img class="q-team-images" src="../test/images/jyoti.png" alt="Los Angeles"&gt;
                      &lt;div class="q-name"&gt;Jyotirmoy&lt;/div&gt;
                      &lt;div class="q-desig"&gt;CEO&lt;/div&gt;
                      &lt;div class="x1"&gt;
                          &lt;span style="color:#ff363f;font-weight:bold;"&gt; Jyoti &lt;/span&gt;
                          &lt;span style="color:#4d4d4d;"&gt; CEO &lt;/span&gt;
                      &lt;/div&gt;
                      &lt;div class="q-jyoti-info"&gt;Lives in Gurgaon. &lt;br/&gt;Has spent 6 years in various multinational companies executing and ideating for new age projects.&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="q-xzz"&gt;Lives in Gurgaon. &lt;br/&gt;Has spent 6 years in various multinational companies executing and ideating for new age projects.&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So basically what I want here is above 500px <strong>.q-xzz</strong> should not be there and below 500px <strong>.q-jyoti-info</strong> should not be there. But somehow this condition is not working perfectly for both mobile and web. Is there anything missing in this conditional statement?</p>