テキスト

Question

編集：ここで要求されたテキストが行に収まるようにするために、画面が小さすぎ取得jsfiddle

であるため、それだけで他の行ではなく、行の高さを伸ばすと重なっ 。おそらく、これは、均等な間隔と垂直方向の整列でhtmlページをレイアウトするために、すべての行に行の高さをパーセント値で設定しているためです。このテキストの重なりを他の行に修正するにはどうすればよいですか？私はどういうわけか、高さを設定せずに行を垂直に整列させて調べるべきでしょうか？または、それをそのまま維持し、必要に応じて高さを拡張するように各行に何らかのオーバーフロープロパティを追加できますか？

すべての関連画像とコード：フルスクリーンの

スクリーンショット（良い - 何の問題もまだ）小さい画面上の中段素子上をホバリングの

スクリーンショット（問題）

小さいほうの一番下の行にカーソルを合わせると、画面：

のページのすべての私のhtml：

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

EDIT：

<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> 

のページのすべての私のCSSここで要求されたようにjsfiddle

です

Answer 1

さて。今質問は明らかです。問題は簡単に解決できました。

問題は次のdivにあります。あなたはCOL-MD-12を持って、それを指定したが、画面が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> 

ときあなたはそれを強制していないので、最も簡単な方法は、

参照example

の重複防止に col-xs-12クラスを追加することです