title: CSS Media Queries not working in browser resize
body: <p>I have been doing a lot of research for days already on why this problem persists. So here it goes.</p>
  <p>I have applied CSS media queries for smartphones. It works perfectly fine in the browser device simulator and the actual smartphone itself. But my client checks it differently, he resizes the browser. Unfortunately, the CSS media queries do not apply to the browser which breaks the entire layout.</p>
  <p>My client insists to fix the breaks in browser resize but if I do this, it breaks the smartphone layout.</p>
  <p>I have already added:<br>
  <code>&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;</code></p>
  <p>And this is how I declare my queries:<br></p>
  <pre><code>@media only screen and (max-width: 767px)
  {
  ...
  }
  
  @media only screen and (max-width: 360px)
  {
  ...
  }
  </code></pre>
  <p>Now, to fix the client's demand I have added something like this
  <code>@media only screen and (max-device-width: 767px)</code> to target specifically the smartphones.</p>
  <p>For me, this isn't an efficient fix to what's happening. I just want to know where did it all go wrong and why the browser is not reading all my CSS media queries. I am hoping for an answer soon.</p>