title: CSS Styling that only styles all IPhones and IPADS
body: <p>Problem: I have an image that is responsive in all platforms except for iphones.</p>
  
  <p>On the Android version of the site, the following image is not skewing:
  <a href="https://i.stack.imgur.com/OhiLE.png" rel="noreferrer"><img src="https://i.stack.imgur.com/OhiLE.png" alt="enter image description here"></a></p>
  
  <p>On the iphone version of the site, it is blowing up the image and I am not sure.</p>
  
  <p>I thought the following would resolve the skewing issue which it does except for IPHONES and IPADS</p>
  
  <pre><code>#homepage .carousel .item { 
      height: auto !important; 
  } 
  
  #homepage .carousel .item img { 
      min-width: 100% !important; 
      max-width: 100% !important; 
      height: auto !important; 
      position: relative !important; 
  } 
  
  .carousel-indicators { 
      bottom: 2%; 
  } 
  </code></pre>
  
  <p>That being said, I have also posted the rest of the css I did to make it responsive for different sizes:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/***TEST 1.2***/
  #homepage .carousel .item { 
      height: auto !important; 
  } 
  
  #homepage .carousel .item img { 
      min-width: 100% !important; 
      max-width: 100% !important; 
      height: auto !important; 
      position: relative !important; 
  } 
  
  .carousel-indicators { 
      bottom: 2%; 
  } 
  
  @media screen and (max-device-width: 375px) and (max-device-height: 667px) {
   #homepage .carousel .item { 
    height: auto !important; 
   } 
  
   #homepage .carousel .item img { 
    min-width: 100% !important; 
    max-width: 100% !important; 
    height: auto !important; 
    position: relative !important; 
   } 
  
   .carousel-indicators { 
    bottom: 2%; 
   } 
  }
  
  @media (max-width:331px){
   .navbar-header{
    margin-left:-20px;
   }
   .navbar-toggle{
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-top: 8px;
    margin-right: 0px; 
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
   }
  }
  
  
  @media screen and (max-width:331px) and (-webkit-min-device-pixel-ratio:0) { 
   #homepage .carousel .item img {
    min-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    margin-top: 71px;
   }
  }
  /*
  @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) { 
   #homepage .carousel .item { 
      height: 200px !important; 
   } 
  
   #homepage .carousel .item img { 
    min-width: 100% !important; 
    width: 100% !important; 
    height: 200px !important; 
    position: relative !important; 
   } 
  }*/
  
  
  @media (min-width:729px) and (max-width:748px){
   #homepage .carousel .item img {
    min-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    margin-top: 71px;
   }
  }
  
  @media(max-width: 728px) and (orientation:portrait){
   #homepage .carousel .item img {
    min-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    margin-top: 71px;
   }
  }
  
  @media screen and (max-width: 728px) and (orientation:portrait) and (-moz-images-in-menus:0){
   #homepage .carousel .item img {
    min-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    margin-top: 0px;
   }
  }
  
  /*Firefox*/
  @media screen and (max-width: 748px) and (-moz-images-in-menus:0) {
      #homepage .carousel .item img {
    min-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    margin-top: 0px;
   }
  }
  
  @media(max-width: 768px) and (orientation:landscape){
   #homepage .carousel .item img {
    min-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    margin-top: 71px;
   }
  }
  
  @media screen and (max-width: 768px) and (orientation:landscape) and (-moz-images-in-menus:0){
   #homepage .carousel .item img {
    min-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    margin-top: 0px;
   }
  }
  
  @media (max-width: 767px){
   .image-margin-top2 {
    margin-top: 182px !important;
   }
   .eventMargin {
    margin-top: -85px;
   }
  }
  
  @media (max-width:748px){
   #homepage .carousel .item { 
    height: auto !important; 
   } 
  }
  
  @media screen and (min-width: 766px) and (max-width:1024px){
   .carousel-caption{
    right:20%;
    left:15%;
    top:-4%;
   } 
   .titleSlide, h1{
    font-size: 33px !important;
   } 
   .content1{
    font-size:20px !important;
   }
  }
  
  @media screen and (min-width: 766px) and (max-width:1024px) and (orientation:landscape){
   .carousel-caption{
    right:20%;
    left:15%;
    top:14%;
   } 
   .titleSlide, h1{
    font-size: 33px !important;
   } 
   .content1{
    font-size:20px !important;
   }
  }
  
  
  @media screen and (min-width: 1025px) and (max-width:1280px){
   .carousel-caption{
    right:20%;
    left:20%;
    top:20%;
   }
  }
  
  @media (min-width:749px) and (max-width:767px){
   #homepage .carousel .item { 
    height: auto !important; 
    /*margin-top:71px;*/
   } 
  }
  
  @media screen and (min-width:768px) and (max-width:991px) and (-webkit-min-device-pixel-ratio:0) {
   #homepage .carousel .item { 
    height: auto !important; 
    margin-top:154px;
   } 
  }
  
  @media (min-width:783px) and (max-width:991px){
   .eventMargin{
    margin-top:-200px;
   }
   .image-margin-top2 {
    margin-top: 60px !important;
   }
  }
  
  @media (max-width:767px){
   .image-margin-top2 {
    margin-top: 176px !important;
   }
  }
  
  @media (min-width:768px) and (max-width:782px){
   .image-margin-top2 {
    margin-top: 62px !important;
   }
   
   .eventMargin{
    margin-top: -200px;
   }
  
  }
  
  @media (min-width:992px){
   .image-margin-top2 {
    margin-top: 57px !important;
   }
  }
  
  @media (min-width:992px) and (max-width:1024px){
   #homepage .carousel .item { 
    height: auto !important; 
    margin-top:20px;
   } 
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have used the following site to target IPhones and IPads but it has no effect on iphones or ipads: <a href="http://stephen.io/mediaqueries/" rel="noreferrer">http://stephen.io/mediaqueries/</a>. The image continues to skew.</p>
  
  <p>Is there a way to detect when the site is being displayed on a iphone and ipad. Once it detects it, call another css file that is only for iphones and ipads?</p>
  
  <p>I was able to find a line of code that will detect if its on the iphone but not sure how to modify it for both iphones and ipads. I did the following but it appears it does not detect whether or not the iphone or ipad is being detected:</p>
  
  <pre><code>        &lt;script language=javascript&gt;
          if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
              &lt;link rel="stylesheet" href="/Regal-en-us/includes/themes/MuraBootstrap3/assets/bootstrap/css/iphone.css"&gt;
          }
      &lt;/script&gt;
  </code></pre>
  
  <p>Any help would be appreciated.</p>
  
  <p>Thank You</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I used the following to detect whether a user is using a ipad or iphone:</p>
  
  <pre><code>    &lt;script language=javascript&gt;
      if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
          document.getElementsByTagName('head')[0].insertAdjacentHTML('beforeend', '&lt;link rel="stylesheet" href="/includes/themes/MuraBootstrap3/assets/bootstrap/css/iphone.css"&gt;');
          alert("Hello1.1!");
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Which it does detect the iphone and ipad. However, the styling I am doing is not being detected. The following is the styling I am using for the iphone and ipad to style the carousel image:</p>
  
  <pre><code>#homepage .carousel .item { 
      height: auto !important; 
  } 
  
  #homepage .carousel .item img { 
      min-width: 100% !important; 
      max-width: 100% !important; 
      height: auto !important; 
      position: relative !important; 
  } 
  
  .carousel-indicators { 
      bottom: 2%; 
  } 
  
  /* Portrait and Landscape iphone and ipad*/
  /*@media only screen 
    and (min-device-width: 375px) 
    and (max-device-width: 760px) 
    and (-webkit-min-device-pixel-ratio: 2) { 
      #homepage .carousel .item { 
          height: 139px !important; 
          margin-top:285px !important;
      }
  }*/
  @media screen and (max-width:768px) and (orientation:portrait) and (-webkit-max-device-pixel-ratio:0) { 
      #homepage .carousel .item img {
          /*min-width: 100% !important;
          /*width: 100% !important;*/
          height: 293px !important;*/
          position: relative !important;
          margin-top: 200px;
      }
  }
  </code></pre>
  
  <p>As you can see, it does not detect the media query but it is being recognized by IPAD and IPHONE because the alert goes off.</p>
  
  <p>Any help would be appreciated.</p>
  
  <p><strong>UPDATE:</strong> </p>
  
  <p>At this point, I would just like to make look nice on the iphone and ipad. I have been working on this for a while with no solution or headway on this</p>