texte débordant de Bootstrap 4 rangs

Question

EDIT: Comme l'a demandé ici est le jsfiddle

Lorsque l'écran est trop petit pour que le texte correspond à la ligne, il chevauche simplement d'autres lignes, plutôt que d'étendre la hauteur de ligne . C'est peut-être parce que je place les hauteurs de ligne sur chaque ligne comme une valeur en pourcentage, afin de disposer ma page html avec un espacement régulier et un alignement vertical. Comment corriger ce chevauchement de texte sur d'autres lignes? Dois-je regarder d'une façon ou d'une autre aligner verticalement mes rangées sans régler leur hauteur? Ou est-ce que je peux le garder comme il est et ajouter une sorte de propriété de débordement à chaque rangée pour leur dire d'augmenter leur taille si nécessaire?

Toutes les images pertinentes et code:

capture d'écran de plein écran (bon - pas de problème encore)

capture d'écran de vol stationnaire au-dessus de l'élément central de la ligne sur des écrans plus petits (problèmes)

capture d'écran de la rangée inférieure de la rangée inférieure écrans:

tout mon html pour la page:

<div id="landing-page" class="text-uppercase"> 
    <div class="row hidden-lg-up" style="height:20%;overflow-y:auto;"> 
     <div class="col-xs-3 flex-xs-middle"> 
      <img width="100" src="images/monster2.png" /> 
     </div> 
     <div class="col-xs-3 offset-xs-6 flex-xs-middle"> 
      <img class="pull-xs-right" width="100" src="images/monster4.png" /> 
     </div> 
    </div> 
    <div class="row" style="height:95%;overflow-y:auto;"> 
     <div class="col-xs-1 col-sm-2 col-md-3 hidden-md-down flex-xs-top flex-sm-middle"> 
      <img width="80%" src="images/monster2.png" /> 
     </div> 
     <div class="col-md-12 col-lg-6 flex-xs-middle "> 
      <div id="motto-text" style="text-align: center;"> 
       <h5 class="text-muted display-6">the vegan repository</h5> 
       <h1 class="display-3"> 
        find vegan stuff* near you. 
       </h1> 
       <a id="try-now-button" class="with-border clickable" href="#search-filter-page"> 
        <h5 class="text-center medium-text">try now</h5> 
       </a> 
      </div> 
     </div> 
     <div class="col-xs-1 col-sm-2 col-md-3 hidden-md-down flex-xs-top flex-sm-middle"> 
      <img class="pull-xs-right" width="80%" src="images/monster4.png" /> 
     </div> 
    </div> 
    <div class="row" style="height:5%;overflow-y:auto;"> 
     <h4 class="display-6 flex-xs-bottom"> 
      *Stuff like restaurants, meat alternatives, dairy alternatives, and much more! 
     </h4> 
    </div> 
</div> 

toute ma css pour la page:

div#landing-page { 
    background-color: #696969; 
    height: 100%; 
    padding: 110px 40px 0px 40px; 
    overflow-y: auto; 
    min-height:470px; 
} 

EDIT: Comme l'a demandé ici est le jsfiddle

Answer 1

D'accord. Maintenant, la question est claire. Le problème était facile à résoudre.

Le problème est dans le div suivant. Vous l'avez spécifié avoir col-md-12, mais vous ne l'avez pas forcer lorsque l'écran est xs

<div class="col-md-12 col-lg-6 flex-xs-middle "> 
     <div id="motto-text" style="text-align: center;"> 
     <h5 class="text-muted display-6">the vegan repository</h5> 
     <h1 class="display-3"> 
        find vegan stuff* near you. 
       </h1> 
     <a id="try-now-button" class="with-border clickable" href="#search-filter-page"> 
      <h5 class="text-center medium-text">try now</h5> 
     </a> 
     </div> 
    </div> 

de sorte que le anticumul

chose la plus simple est d'ajouter col-xs-12 classe Voir example