title: Media queries and bootstrap modals?
body: <p>I am creating a modal and I want it to be able to look good on all devices but currently I am trying the media query below and it changes on all devices ( MBP, iPhone 6, 24 inch Desktop )</p>
  
  <pre><code>.modal-wide{
    width: 60%;
    max-height: 90vh;
    /*height: auto;*/
  }
  
  /* For mobile phones: */
  @media only screen and (min-width: 480px) {
    .modal-body {
      position: relative;
        max-height: 200px; 
        overflow-y: auto;
    } 
    .modal-wide {
      width: 95%;
    }
  }
  </code></pre>
  
  <p>My thoughts was it would only change on my iPhone? but this isn't the case? Have I done something wrong? It is the <code>.modal-wide</code> selector styling that is messed up.</p>