Bootstrap Карусель не раздвигается на iphone/<480px

Question

Мой сайт, как и многие другие, использует карусель бутстрапа на домашней странице.

По какой-то причине, несмотря на то, что функция контроля карусели и все остальное выглядят нормально, функция слайдов данных перестает работать с размерами монитора менее 480 пикселей (так, любое мобильное устройство).

Есть ли фрагмент кода, который мне нужно добавить в раздел @media(max-width:480px) в CSS? Как она стоит у меня нет каких-либо карусельной/отзывчивый связанный код под этот размер, но только следующее:

@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; 
    } 
} 

Пример можно увидеть here.

Answer 1

Добавить Z-индекс на вас карусельного-контроль:

.carousel-control { 
    height: 80px; 
    margin-top: 0; 
    font-size: 120px; 
    text-shadow: 0 1px 1px rgba(0,0,0,.4); 
    background-color: transparent; 
    border: 0; 
    position: absolute; 
    top: 40%; 
    left: 15px; 
    color: #fff; 
    z-index: 99999; /*Add This */ 
    } 

Что это делает это только делает этот контроль находится в передней части слайдера, который больше, чем фактический размер экрана.