title: Responsive Carousel Issue with 767px Media Query - Carousel Left/Right Button and Btn Button Not Working
body: <p>Any help would be greatly appreciated.</p>
  
  <p>Here's my site: <a href="http://www.boriskdesign.com" rel="nofollow">http://www.boriskdesign.com</a></p>
  
  <p>Everything is perfect, except at 767px (smartphone size), the Carousel's left and right buttons aren't clickable. Same goes for the Yellow button that says "Contact Me."</p>
  
  <p>What's going on?</p>
  
  <p>Here's the code for the 767 Media Query:</p>
  
  <pre><code>@media (max-width: 767px) {
  
    .container {
      margin-bottom: 60%;
    }
  
    div.footer_right_border {
    border-right: none;
    }
  
    div.footer_right_border {
        visibility: none;
    }
  
    .navbar-inverse .navbar-inner {
      margin-top: -13%;
    }
  
    .navbar-inner {
      margin-top: -20px;
      margin: -20px;
    }
    .carousel {
      margin-left: -20px;
      margin-right: -20px;
      padding-top: 7%;
    }
  
    .carousel .container {
      padding-top: 20px;       
    }
  
    .carousel .item {
      height: 300px;
    }
    .carousel img {
      width: auto;
      height: 300px;
    }
    .carousel-caption {
      width: 300px;
      padding: 0 70px;
      margin-top: 15px;
    }
    .carousel-caption h1 {
      font-size: 2em;
    }
    .carousel-caption .lead,
    .carousel-caption .btn {
      font-size: 18px;
    }
    .btn-custom {
      position: relative;
      z-index: 19;
    }
    .marketing .span4 + .span4 {
      margin-top: 40px;
    }
  
    .featurette-heading {
      font-size: 30px;
    }
    .featurette .lead {
      font-size: 18px;
      line-height: 1.5;
    }
  
  }
  </code></pre>
  
  <p>The code for the Carousel:</p>
  
  <pre><code>&lt;!-- Carousel
      ================================================== --&gt;
      &lt;div id="myCarousel" class="carousel slide"&gt;
        &lt;div class="carousel-inner"&gt;
          &lt;div class="item active"&gt;
            &lt;img src="images/carousel/all_devices.jpg" style="opacity: .9;"   class="img_car"&gt;
            &lt;div class="container"&gt;
              &lt;div class="carousel-caption"&gt;
                &lt;h1&gt;Responsive Web Design&lt;/h1&gt;
                &lt;p class="lead"&gt;For all devices under the sun.&lt;/p&gt;
                &lt;br&gt;&lt;br&gt;&lt;a class="btn btn-large btn-primary btn-custom" href="contact.html"&gt;Contact Me&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
            &lt;img src="images/carousel/rn.jpg" alt="" class="img_car"&gt;
            &lt;div class="container"&gt;
              &lt;div class="carousel-caption"&gt;
                &lt;h1&gt;The Rita &amp; Naum Orchestra&lt;/h1&gt;
                &lt;p class="lead"&gt;Website for the Russian-American band.&lt;/p&gt;
                &lt;br&gt;&lt;br&gt;&lt;a class="btn btn-large btn-primary btn-custom" href="web.html"&gt;Browse Gallery&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
            &lt;img src="images/carousel/mrk.jpg" alt="" class="img_car"&gt;
            &lt;div class="container"&gt;
              &lt;div class="carousel-caption"&gt;
                &lt;h1&gt;Mr. K Tutoring&lt;/h1&gt;
                &lt;p class="lead"&gt;Made with Twitter Bootstrap Responsive.&lt;/p&gt;
                &lt;br&gt;&lt;br&gt;&lt;a class="btn btn-large btn-primary btn-custom" href="web.html"&gt;Browse gallery&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
            &lt;img src="images/carousel/rf.jpg" alt=""&gt;
            &lt;div class="container"&gt;
              &lt;div class="carousel-caption"&gt;
                &lt;h1&gt;DJ Ricky Flood&lt;/h1&gt;
                &lt;p class="lead"&gt;Website for the new, hot New York DJ.&lt;/p&gt;
                &lt;br&gt;&lt;br&gt;&lt;a class="btn btn-large btn-primary btn-custom" href="web.html"&gt;Browse gallery&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;a class="left carousel-control" href="#myCarousel" data-slide="prev"&gt;&amp;lsaquo;&lt;/a&gt;
        &lt;a class="right carousel-control" href="#myCarousel" data-slide="next"&gt;&amp;rsaquo;&lt;/a&gt;
      &lt;/div&gt;&lt;!-- /.carousel --&gt;
  </code></pre>