レスポンシブブーツラップ画像グリッドとテキストを含むウィンドウのサイズ変更

Question

私は以下の画像のようなブートストラップグリッドレイアウトを持っています。テキストセクションには、以下のCSSを持っています

height:720px; 

イメージがブートストラップimg-responsiveクラスを使用して列に挿入されています。

ブラウザウィンドウのサイズを変更すると、すべての画像が縮小され、タブレットメディアクエリの破損点に達するとそれに応じて応答しますが、テキスト領域には高さが定義されているため問題が発生しています。

グレーのテキストボックスをウィンドウのサイズ変更のように縮小することはできますが、テキストは引き続き表示されます。私はjavascriptを使うべきですか？

添付のUPDATE＃

は、任意の提案は素晴らしいことだグリッドとCSSの私の現在のコードです。

CSS/HTML

.home-row{ 
background: #e4e4e4; 
height:720px; 
} 


.home-text{ 
    margin: 0; 
padding: 0; 
text-indent: 0; 
text-align: left; 
font-family:HelveticaNeue; 
text-transform: none; 
text-decoration: none; 
color: #000; 
font-size: 1.9em; 
letter-spacing: normal; 

} 


    <div class="row"> 
    <div class="col-sx-6 col-md-6 col-sm-12 col-lg-6 main-txt home-row"> 
    <p class="home-text"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce         tincidunt dignissim nisi gravida dapibus. Vivamus mollis magna vel lacus pretium scelerisque. Nunc a nibh in nisi pharetra rutrum sit amet vel massa. Pellentesque molestie ex neque, 
     </p> 
     <p> 
     <br> 
     </p> 
     <p class="home-text"> 
     sed commodo nisi condimentum nec. Nam fermentum libero sed pretium scelerisque. Ut risus augue, fringilla maximus dui eget, malesuada laoreet velit. Fusce sit amet tellus  lorem. Interdum 
     </p> 
     <p> 
     <br> 
     </p> 
     <p class="home-text"> 
    Cras interdum tortor id enim fermentum scelerisque. Praesent viverra  ante at pharetra elementum. 

     </p> 
     <p> 
     <br> 
     </p> 
     <p class="home-text"> 
     Donec id mauris elementum, tincidunt ipsum nec, consectetur erat. Ut  nec erat et neque scelerisque fringilla. Sed sodales sem a arcu volutpat maximus  ac eget quam. In. 
     </p> 
     <p> 
     <br> 
     </p> 
     <p class="home-text"> 
     . Praesent viverra ante at pharetra elementum. 
     <br> 

     </p> 

</div> 

    <div class="col-sm-6 col-sx-6 col-md-3 col-lg-3 no-pad"> 
     <img src="img/panel-blue.png" class="img-responsive"> 
    </div> 
<div class="col-sm-6 col-sx-6 col-md-3 col-lg-3 no-pad"> 
    <img src="img/light-house.png" class="img-responsive"> 
    </div> 
    <div class="col-sm-12 col-md-6 .col-md-offset-6 no-pad"> 
    <img src="img/panel-staff.png" class="img-responsive"> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-sm-12 col-md-6 no-pad"> 
    <div class="col-sx-6 col-sm-6 col-md-6 no-pad"> 
    <img src="img/pannel-tall.png" class="img-responsive"> 
    </div> 

    <div class="col-sx-6 col-sm-6 col-md-6 no-pad"> 
    <img src="img/panel-red-img.png" class="img-responsive"> 
    </div> 

    <div class="col-sx-6 col-sm-6 col-md-6 no-pad"> 
    <img src="img/pannel-compas-smal.png" class="img-responsive"> 

    </div> 
    </div> 

    <div class="col-md-6 col-sm-12 no-pad"> 
    <img src="img/panel-large.png" class="img-responsive"> 

    </div> 

    </div> 

Answer 1

の変更高さ：720px;

height:50%; 

に私は私はあなたがレイアウトをデザイン方法を見ることができないので、あなたのコードを持っていないが、画面の割合に設定したPXからの高さを変更することで問題を修正する必要があります。