Bootstrap Karussell Bild und Text in mobilen

Question

lesbar machen Mein Bootstrap Karussell sieht gut aus auf dem Desktop. Die Bilder haben eine Größe von 1200 x 400. Aber auf Mobilgeräten schrumpft es so sehr, dass Sie den Text auf den Bildern nicht vorbereiten können. Außerdem bewegen sich die Navigationspunkte auf der Unterseite des Players oben auf dem Bild.

1) Wie kann ich die Größe groß genug halten Sie den Text auf den Bildern auf mobile

2) lesen Wie kann ich die Navigationspunkte auf der Unterseite des Players überlappt auf meinem Bild auf mobilen

verhindern

Hier ist meine bootply: http://www.bootply.com/huskydawgs/6UtgjHqm8f

mein html hier:

<div class="content-section-b"> 

    <div class="container"> 

     <div class="row"> 
      <div class="col-lg-12"> 
       <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
        <!-- Indicators --> 
        <ol class="carousel-indicators"> 
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
        <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
        </ol> 

        <!-- Wrapper for slides --> 
        <div class="carousel-inner" role="listbox"> 
        <div class="item active"> 
         <img class="img-responsive" src="http://www.onvia.com/responsive/apple_orange_testimonials.png" alt="Apples and Oranges"> 
        </div> 
        <div class="item"> 
         <img class="img-responsive" src="http://www.onvia.com/responsive/pears_mangos_testimonials.png" alt="Pears and Mangos"> 
        </div> 
        </div> 

        <!-- Controls --> 
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
        <span class="sr-only">Previous</span> 
        </a> 
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
        <span class="sr-only">Next</span> 
        </a> 
       </div> 
      </div> 
     </div> 

    </div> 
    <!-- /.container --> 

</div> 
<!-- /.content-section-b --> 

Hier ist meine CSS:

.content-section-b { 
    padding: 50px 0; 
    background-color: #3C5A78; 
} 

.carousel-control.left { 
    background-image:none; 
} 

.carousel-control.right { 
    background-image:none; 
} 

Answer 1

Das Problem ist mit den Quellbildern: sie es scheint, als ob sie zwei verschiedene Karussells Artikel waren, wenn in der Tat nur ein (Apfel-Orange & Birnen- Mango) ... Für eine schnelle Lösung können Sie einzelne Bilder aus den Quellen machen (eine für jede Frucht), das normale Karussell durch Medienabfragen auf xs-Bildschirmen ausblenden und ein visible-xs-Karussell mit 4 anstelle von 2 Karussellen haben Artikel.

Es ist jedoch keine gute Lösung.

Schnell Beispiel: http://www.bootply.com/U5uYwmnt1g

EDIT

Hinzugefügt wurde die CSS die Navigationspunkte auf Handy bewegen nicht mit den Folien überlappen.

Erweiterung auf, warum es nicht die beste Lösung:

-Sie sollte die Elemente des Karussells macht HTML-Elemente sein, für den Anfang, und nicht vollständig auf den Bildern mit Formen und Text in (alles auf Ihren Bildern vertrauen kann einfach mit CSS repliziert werden, mit Bildern nur für die Früchte, oder für die Früchte und der Kreis, wenn Sie nicht den Kreis mit CSS machen wollen)

-Once dies getan ist, könnten Sie überspringen 2. Karussell und ändern Sie den Inhalt jeder Folie durch Medienabfragen (oder Hilfsklassen), um das gewünschte Ergebnis zu erhalten

-Der CSS für die Navigationspunkte verwendet die max-width Abfrage, die ich verstehe nicht in der Regel empfohlen wird, obwohl in diesem Fall kann es auch verwendet werden (wenn jemand auf diese erweitern kann, bitte)