title: Bootstrap Carousel not sliding on iphone/ <480px
body: <p>My site, like many others, utilizes bootstrap's carousel on the home page.</p>
  
  <p>For some reason, despite the carousel-control appearing and everything else looking fine, the data slide functionality stops working on monitor sizes less than 480px (so, any mobile device). </p>
  
  <p>Is there a snippet of code I need to add to the <code>@media(max-width:480px)</code> section in the CSS? As it stands I don't have any carousel/responsive related code under that size, but just the following:</p>
  
  <pre><code>@media (max-width: 979px) {
      .carousel .item {
          height: 500px;
      }
      .carousel img {
          width: auto;
          height: 500px;
      }
  }
  @media (max-width: 767px) {
      .carousel {
          margin-left: -20px;
          margin-right: -20px;
      }
      .carousel .container {}
      .carousel .item {
          height: 300px;
      }
      .carousel img {
          height: 300px;
      }
      .carousel-caption {
          width: 65%;
          padding: 0 70px;
          margin-top: 100px;
      }
      .carousel-caption h1 {
          font-size: 30px;
      }
      .carousel-caption .lead, .carousel-caption .btn {
          font-size: 18px;
      }
  }
  </code></pre>
  
  <p>An example can be seen <a href="http://idies.jhu.edu/" rel="nofollow">here</a>.</p>