title: Text Responsive in Carousel (Bootstrap 4)l
body: <p>I'm using this code above to do a carousel with a text inside. When I decrease the screen or open the website in a smartphone, the text is all misaligned. Someone knows what I need to do? I've looked for a lot of website examples, but I didn't find a good answer for this problem.</p>
  
  <p>For instance, if the text is like this:</p>
  
  <p>WELCOME TO MY SITE
  I'm glad you came</p>
  
  <p>When I resize or open in the cellphone, the text is something like it:</p>
  
  <p>WE</p>
  
  <p>L</p>
  
  <p>C</p>
  
  <p>OM</p>
  
  <p>E</p>
  
  <p>TO</p>
  
  <p>MY</p>
  
  <p>S</p>
  
  <p>ITE</p>
  
  <p>(...)</p>
  
  <p><strong>The HTML code is quite similar to the example of Bootstrap 4 official site:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* CUSTOMIZE THE CAROUSEL
      -------------------------------------------------- */
      
      /* Carousel base class */
      .carousel {
        margin-bottom: 4rem;
      }
      /* Since positioning the image, we need to help out the caption */
      .carousel-caption {
        z-index: 10;
        bottom: 3rem;
      }
      
      /* Declare heights because of positioning of img element */
      .carousel-item {
        height: 32rem;
        background-color: #777;
      }
      .carousel-item &gt; img {
        position: absolute;
        top: 0;
        left: 0;
        min-width: 100%;
        height: 32rem;
      }
      
      
      
      
      /* RESPONSIVE CSS
      -------------------------------------------------- */
      
      @media (min-width: 40em) {
        /* Bump up size of carousel content */
        .carousel-caption p {
          margin-bottom: 1.25rem;
          font-size: 1.25rem;
          line-height: 1.4;
        }
      
        .featurette-heading {
          font-size: 50px;
        }
      }
      
      @media (min-width: 62em) {
        .featurette-heading {
          margin-top: 7rem;
        }
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" /&gt;
  
  &lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="myCarousel" class="carousel slide" data-ride="carousel"&gt;
        &lt;ol class="carousel-indicators"&gt;
          &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
          &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
          &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
        &lt;/ol&gt;
        &lt;div class="carousel-inner"&gt;
          &lt;div class="carousel-item active"&gt;
            &lt;img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide"&gt;
            &lt;div class="container"&gt;
              &lt;div class="carousel-caption d-md-block text-left"&gt;
                &lt;h1&gt;Example headline.&lt;/h1&gt;
                &lt;p&gt;Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.&lt;/p&gt;
                &lt;p&gt;&lt;a class="btn btn-lg btn-primary" href="#" role="button"&gt;Sign up today&lt;/a&gt;&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="carousel-item"&gt;
            &lt;img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide"&gt;
            &lt;div class="container"&gt;
              &lt;div class="carousel-caption d-md-block"&gt;
                &lt;h1&gt;Another example headline.&lt;/h1&gt;
                &lt;p&gt;Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.&lt;/p&gt;
                &lt;p&gt;&lt;a class="btn btn-lg btn-primary" href="#" role="button"&gt;Learn more&lt;/a&gt;&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="carousel-item"&gt;
            &lt;img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide"&gt;
            &lt;div class="container"&gt;
              &lt;div class="carousel-caption d-md-block text-right"&gt;
                &lt;h1&gt;One more for good measure.&lt;/h1&gt;
                &lt;p&gt;Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.&lt;/p&gt;
                &lt;p&gt;&lt;a class="btn btn-lg btn-primary" href="#" role="button"&gt;Browse gallery&lt;/a&gt;&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"&gt;
          &lt;span class="carousel-control-prev-icon" aria-hidden="true"&gt;&lt;/span&gt;
          &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
        &lt;/a&gt;
        &lt;a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next"&gt;
          &lt;span class="carousel-control-next-icon" aria-hidden="true"&gt;&lt;/span&gt;
          &lt;span class="sr-only"&gt;Next&lt;/span&gt;
        &lt;/a&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>