title: CSS Media Queries not working in Firefox and Chrome
body: <p>One of my clients has a site with a responsive design (three based on ranges) with so many graphics they do have to reduce them for each range. We don't detect by device or anything silly though I do need to define with CSS profiles that I can later read with JavaScript as there are things we have to go out of our way and style with both JavaScript/CSS though because the background-image moves based on the "profile" the calculations have to be based off of which media query is in effect.</p>
  
  <p>Unfortunately both Firefox and Chrome are acting a bit wonky when it comes to which profile is "active". The client considers 640 pixels or less to be a "phone" device, 641 ~ 991 a "tablet" device and 992 pixels and greater to be a "desktop" device. I've managed to improve a few things though I haven't figured out why "tablet" isn't working on Firefox and why both "phone" and "tablet" don't work on Chrome?</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt;
  &lt;head&gt;
  &lt;title&gt;Device Profiles&lt;/title&gt;
  &lt;style type="text/css"&gt;
  @media (min-width: 0) and (max-width: 640px) {
      h1::before {content: 'Phone ';}
  }
  @media (min-width: 641px) and (min-width: 991px) {
      h1::before {content: 'Tablet ';}
  }
  @media (min-width: 992px) {
      h1::before {content: 'Desktop ';}
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;h1&gt;Profile&lt;/h1&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>