title: Position of Slider's item h1 variable, h2 static overlap the first
body: <p>I have an slider item's with an image, h1 and h2.I'm having problems with the position of h1 and h2 on mobile phones. The h2 has position absolute, so when the h1 has bigger text, the h2 doesn't move down, instead it he overlap the h1.</p>
  
  <p>I have a live example so I think is better for you to <a href="http://residenciarucab.es/rucab/index.php" rel="nofollow noreferrer">see it</a>.</p>
  
  <p>Scroll to the last slider of the page and see in mobile version.</p>
  
  <pre><code>  &lt;div class="container" style="height: 100%;"&gt;
    &lt;div class="row"&gt;
  
        &lt;div id="carouselExampleControls3" class="carousel slide test-slider"&gt;
    &lt;div class="carousel-inner"&gt;
      &lt;div class="carousel-item active"&gt;
  &lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="banner col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 mx-auto"&gt;
              &lt;img alt="Bootstrap Image Preview"  src="img/testimonios/_MG_6541-copia.jpg"/&gt;
  
       &lt;div&gt; &lt;h1 class="test-h1"&gt;"ESTOY CON MIS AMIGOS Y SIENTO LIBERTAD"&lt;/h1&gt;&lt;h2&gt;&lt;span&gt;JACOBO CARRASCO&lt;/span&gt;,&lt;br&gt; MADRID&lt;/h2&gt;
          &lt;/div&gt;&lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;    &lt;/div&gt;
  
      &lt;div class="carousel-item"&gt;
  &lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="banner col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 mx-auto"&gt;
              &lt;img alt="Bootstrap Image Preview"  src="img/testimonios/_MG_6522-copia.jpg"/&gt;
  
        &lt;div&gt;&lt;h1 class="test-h1 gran-parrafo"&gt;"LO MEJOR SON LOS RATITOS QUE PASAMOS EN EL CHILL OUT"&lt;/h1&gt;&lt;h2&gt;&lt;span&gt;LAURA LANDA&lt;/span&gt;,&lt;br&gt; LA RIOJA&lt;/h2&gt;
          &lt;/div&gt;&lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;    &lt;/div&gt;
  
      &lt;div class="carousel-item"&gt;
  &lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="banner col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 mx-auto"&gt;
              &lt;img alt="Bootstrap Image Preview"  src="img/testimonios/_MG_6548-copia.jpg"/&gt;
  
        &lt;div&gt;&lt;h1 class="test-h1"&gt;"LA RUCAB ES PERFECTA PARA COMBINAR ESTUDIOS Y OCIO"&lt;/h1&gt;&lt;h2&gt;&lt;span&gt;ALEJANDRO ÁLVAREZ&lt;/span&gt;,&lt;br&gt; ALMENDRALEJO&lt;/h2&gt;
          &lt;/div&gt;&lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;    &lt;/div&gt;
  
      &lt;div class="carousel-item"&gt;
  &lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="banner col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 mx-auto"&gt;
              &lt;img alt="Bootstrap Image Preview"  src="img/testimonios/_MG_6501-copia.jpg"/&gt;
  
        &lt;div&gt;&lt;h1 class="test-h1 gran-parrafo"&gt;"ES COMO ESTAR EN CASA CON UN MONTÓN DE AMIGOS Y COSAS QUE HACER"&lt;/h1&gt;&lt;h2 class="gran-parrafo-h2"&gt;&lt;span&gt;MARTA MATEO&lt;/span&gt;,&lt;br&gt; CÁCERES&lt;/h2&gt;
          &lt;/div&gt;&lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;    &lt;/div&gt;
      &lt;div class="carousel-item"&gt;
  &lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="banner col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 mx-auto"&gt;
              &lt;img alt="Bootstrap Image Preview"  src="img/testimonios/_MG_6512-copia.jpg"/&gt;
  
        &lt;div&gt;&lt;h1 class="test-h1 gran-parrafo"&gt;"UN SITIO CAPAZ DE ENCONTRAR Y SACAR LO MEJOR DE CADA UNO"&lt;/h1&gt;&lt;h2 class="gran-parrafo-h2"&gt;&lt;span&gt;CARMEN DE PEDRO&lt;/span&gt;,&lt;br&gt; CÁCERES&lt;/h2&gt;
          &lt;/div&gt;&lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;    &lt;/div&gt;
  &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>I paste the screenshot of all the item's. See that when the pink text is bigger the h2 overlap it:</p>
  
  <p><a href="https://i.stack.imgur.com/c71jH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/c71jH.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/2KOJi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2KOJi.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/Dhkbg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Dhkbg.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/EwFsh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EwFsh.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/LFgQs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LFgQs.png" alt="enter image description here"></a></p>
  
  <p>EDIT:</p>
  
  <p>WITH THE ANSWER TWEAKS:</p>
  
  <p><a href="https://i.stack.imgur.com/Y8NQL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Y8NQL.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/wcJla.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wcJla.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/eKxVk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eKxVk.png" alt="enter image description here"></a></p>