Warum wird mein Bootstrap-Vollbild-Hintergrundkarussell mit Fade-Effekt nicht im Mobilgerät angezeigt?

Question

Ich gründete den Slider auf diesem Link - https://codepen.io/crashy/pen/JoKMgG/ - kopiert genau das gleiche und es funktioniert einwandfrei in allen Browsern, aber das Karussell zeigt nicht in mobilen aus irgendeinem Grund kann ich nicht herausfinden, warum. Jede Hilfe wäre großartig.

Bootstrap-Vorlage: New Age

CSS

html { 
    position: relative; 
    min-height: 100%; 
} 
.carousel-fade .carousel-inner .item { 
    opacity: 0; 
    transition-property: opacity; 
} 
.carousel-fade .carousel-inner .active { 
    opacity: 1; 
} 
.carousel-fade .carousel-inner .active.left, 
.carousel-fade .carousel-inner .active.right { 
    left: 0; 
    opacity: 0; 
    z-index: 1; 
} 
.carousel-fade .carousel-inner .next.left, 
.carousel-fade .carousel-inner .prev.right { 
    opacity: 1; 
} 
.carousel-fade .carousel-control { 
    z-index: 2; 
} 
@media all and (transform-3d), 
(-webkit-transform-3d) { 
    .carousel-fade .carousel-inner > .item.next, 
    .carousel-fade .carousel-inner > .item.active.right { 
     opacity: 0; 
     -webkit-transform: translate3d(0, 0, 0); 
     transform: translate3d(0, 0, 0); 
    } 
    .carousel-fade .carousel-inner > .item.prev, 
    .carousel-fade .carousel-inner > .item.active.left { 
     opacity: 0; 
     -webkit-transform: translate3d(0, 0, 0); 
     transform: translate3d(0, 0, 0); 
    } 
    .carousel-fade .carousel-inner > .item.next.left, 
    .carousel-fade .carousel-inner > .item.prev.right, 
    .carousel-fade .carousel-inner > .item.active { 
     opacity: 1; 
     -webkit-transform: translate3d(0, 0, 0); 
     transform: translate3d(0, 0, 0); 
    } 
} 
.item:nth-child(1) { 
    background: url(../img/img-slide-1.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
.item:nth-child(2) { 
    background: url(../img/img-slide-2.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
.item:nth-child(3) { 
    background: url(../img/img-slide-3.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
.item:nth-child(4) { 
    background: url(../img/img-slide-4.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
.item:nth-child(5) { 
    background: url(../img/img-slide-5.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
.carousel { 
    z-index: -99; 
} 
.carousel .item { 
    position: fixed; 
    width: 100%; 
    height: 100%; 
} 
.title { 
    text-align: center; 
    margin-left: auto; 
    margin-right: auto; 
    padding: 10px; 
    color: #FFF; 
    position: absolute; 
    top: 40%; 
    width: 100%; 
} 

HTML

<header class="carousel slide carousel-fade" data-ride="carousel"> 
     <!-- Wrapper for slides --> 
     <div class="carousel-inner" role="listbox"> 
       <div class="item active"> 
        <div class="title"> 
        <h1>INNOVATIVE</h1> 
        <div class="intro-copy"> 
        Sophisticated and cutting-edge solutions for edgy and out-of- the-box projects 
        </div> 
        </div> 
       </div> 
       <div class="item"> 
        <div class="title"> 
        <h1>EFFICIENT</h1> 
        <div class="intro-copy"> 
        Space-efficient and cost-effective developments 
        </div> 
        </div> 
       </div> 
       <div class="item"> 
        <div class="title"> 
        <h1>SMART INTEGRATION</h1> 
        <div class="intro-copy"> 
        Technology integration to enhance standards of living and maximize resources 
        </div> 
        </div> 
       </div> 
       <div class="item"> 
        <div class="title"> 
        <h1>CREATIVE DESIGNS</h1> 
        <div class="intro-copy"> 
        Iconic design solutions and memorable developments 
        </div> 
        </div> 
       </div> 
       <div class="item"> 
        <div class="title"> 
        <h1>COMPREHENSIVE SERVICE PROVIDERS</h1> 
        <div class="intro-copy"> 
        Specializing in a wide range of multi-disciplinary services 
        </div> 
        </div> 
       </div> 
      </div> 
     </div> 

     <!-- Remeber to put all the content you want on top of the slider below the slider code --> 
    </header> 

Answer 1

Das Problem ist in new-age.min.css, dies:

@media (min-width: 768px) 
header { 
    min-height: 100%; 
} 

Sie können hinzufügen und zwingen die Mindesthöhe von Header in Ihrem CSS ohne Medienabfrage und so für alle Bildschirmdimension. Fügen Sie HEAD Ihrer Seite diesen Stil hinzu:

<style type="text/css"> 
    header { 
     min-height: 100%; 
    } 
</style>