title: Responsive site works on desktop but not mobile
body: <p>I'm working on developing this responsive Wordpress site: <a href="http://www.allisoncassels.com/Test/" rel="nofollow">http://www.allisoncassels.com/Test/</a> and having a problem with my media queries. </p>
  
  <p>I coded the CSS for the following breakpoints: </p>
  
  <pre><code>/* Portrait Tablets */
  @media only screen and (min-width: 768px) and (max-width: 959px) 
  
  /*  Portrait Mobiles */
  @media only screen and (max-width: 767px) 
  
  /* Landscape Mobiles */
  @media only screen and (min-width: 480px) and (max-width: 767px)
  </code></pre>
  
  <p>On desktop, everything looks great. On my phone and tablet, some things are mobile and some things are still showing like the desktop (stuff I have display: none on is showing, div widths are off, etc.) </p>
  
  <p>The only thing I can figure out is that it's related to my phone/tablet being retina display, but I don't see other sites having to factor that into their calculations... </p>
  
  <p>Really baffled right now, I'll appreciate any help. Thanks</p>