title: How do I overwrite a CSS property for iPad only?
body: <p>CODE:</p>
  
  <pre><code> .container {
        width: 960px;
        max-width: 100%;
        min-width: 960px;
        height: 500px;
        background-color: #fff;
        border: 1px solid #000;
   }
  
  @media only screen 
  and (min-device-width : 768px) 
  and (max-device-width : 1024px) 
  and (orientation : portrait) { 
   .container {
        width: 960px;
        max-width: 100%;
        height: 500px;
        background-color: #fff;
        border: 1px solid #000;
   }
  </code></pre>
  
  <p>By default the container has a min-width of 960px but I am using responsive design and the ipad is smalelr than the 960px width.  Using the code above I thought if it's iPad, it will not pickup the min-width: 960px; but it is.  </p>
  
  <p>What can I do so that the min-width shows only on non-ipad css and on ipad css it doesn't do the min-width? </p>