Bootstrap carousel-caption responsive

[olos]

Salve a tutti, come da titolo sto realizzando un sito usando bootstrap. Ho inserito nella homepage un Carousel. Fin qui tutto bene, il problema ce l'ho con i caption, infatti ho la necessità di inserirne di diversi o comunque con frasi lunghe, e nella visualizzazione su mobile o diminuendo le dimensioni della finestra questi non si adattano, ma vengono "tagliati" fuori. Come potrei fare per renderli responsive? Grazie mille.

[KillerWorm]

Ciao, le tue indicazioni non bastano per poterti dare delle soluzioni mirate al tuo specifico caso, per cui ti rispondo in maniera generica.

Se il sito ha di per sé un layout responsive è possibile che sia organizzato con dei breakpoint, in tal caso puoi impostare, per tali elementi, un diverso font-size relativamente a quegli specifici breakpoint.

In alternativa potresti usare, per il font-size, l'unità di misura in vw o vh, o magari in em (o rem) se il font-size del contenitore (o quello di base del sito) viene già ridimensionato in maniera responsive. Vedi qualche riferimento al capitolo 9 dei link utili CSS, sotto la voce Fonts/unità di misura.

In aggiunta (dipende anche da cosa intendi per "tagliati fuori"), potresti forzare il ritorno a capo reimpostando white-space:normal, ad esempio, o altre relative proprietà che potrebbero influire sul flusso del testo; se queste erano state impostate magari per mantenere una singola riga, o robe del genere.

[olos]

In effetti non ho fornito molto su cui lavorare . Provo a postare il codice html e css relativo al carousel e alle modifiche che ho apportato, magari � di aiuto. Con tagliati fuori intendo proprio che parte di caption esce fuori dal contenitore del carousel, ma a questo punto credo sia un problema di immagine troppo "bassa".....

<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">        <!-- Indicatori -->
        <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
          <li data-target="#myCarousel" data-slide-to="3"></li>
          <li data-target="#myCarousel" data-slide-to="4"></li>
          <li data-target="#myCarousel" data-slide-to="6"></li>
          <li data-target="#myCarousel" data-slide-to="7"></li>
          <li data-target="#myCarousel" data-slide-to="8"></li>
          <li data-target="#myCarousel" data-slide-to="9"></li>
          <li data-target="#myCarousel" data-slide-to="10"></li>
          <li data-target="#myCarousel" data-slide-to="11"></li>
        </ol>


        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img src="res/carosello/1.jpg"  alt="immagine 1"/>
            <div class="carousel-caption">
              <div class="row">
                <div class="col-xs-12">
                  <h3 class="translatorXd">Qualcosa di scritto</h3>
                  <h3 class="translatorXs">Altro testo</h3>
                </div>
              </div>
              <div class="row">
                <div class="col-xs-1 fader">
                  <img src="res/carosello/1/1.png" alt="immagine 1">
                </div>
              </div>
              <div class="row fader">
                <div class="col-xs-offset-8 col-xs-2">
                  <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#scopriDiPiu">Scopri</button>
                </div>


              </div>
            </div>






          </div>
          <div class="item">
            <a href="contatti.php"><img src="res/carosello/2.jpg" alt="immagine 2"/></a>
            <div class="carousel-caption cpt fader">
              <button type="button" class="btn btn-warning"><a href="contatti.php">Scopri</a></button>
            </div>
          </div>






        </div>


        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>

.carousel-inner img{
  margin: 0 auto;
  max-height:750px;
  width:100%;
}
.carousel-indicators li {
  background-color: #FF9933 !important;
  border: solid;
  border-color: #969696;


}
.carousel-control{
  background: none !important;
  filter: none !important;
  progid:none !important;
}
.carousel-caption{
  font-weight: bold;
  color: #000000;


}
.carousel-caption h3{
  color: #FFFFFF;
  font-weight: bold;
  font-size: 3vw;
   
}
.carousel-caption img{
  width: 15vw;
}

Come vedi ho provato ad utilizzare per alcuni elementi le unita di misura che mi hai suggerito e ha migliorato parecchio la sutuazione, ma non del tutto. E comunque grazie mille