サイトが小さな画面でぼやけます

Question

私はブートストラップでサイトを作っていますが、ほとんどが応答性がありますが、画面サイズが小さくなるとちょっと混乱する要素がいくつかあります。 これを修正する方法を教えてください。

大きな画面で要素がどのように表示されます。それは小さな画面

にどのように見えるかの要素は、小さな画面でも、同じ位置を維持して

そしてここでは、方法はあります？ 他のアイデア私はそれを小さな画面で見せるべきですか？私はこの事を解決するために行う必要があります変更内容お知らせくださいcodepen link

.container{ 
    text-align: center; 
    width:80%; 

} 

.first{ 
    background:rgb(0,30,58); 
    color:white; 

} 
.span1,.span2{ 
    font-size:36px; 
    font-weight:bold; 
} 
.span1{ 
color:rgb(72,174,137); 
} 

[type="text"]{ 
    border-radius:25px; 
    padding-left:5px; 
} 

[type="submit"]{ 
    color:white; 
    background-color: rgb(72,174,137); 
    border-radius:25px; 
    position:relative; 
    margin-left:-25px; 
} 
.use{ 
    max-height:85%; 
    margin:0 auto; 

} 
.usediv{ 
    border:3px solid rgb(72,174,137); 

    padding-left: 10px; 
    padding-right: 15px; 
    width:80%; 
    margin:0 auto; 
    max-height:220px; 
} 
.usediv p{ 

    margin-top:10px; 
} 
.usediv img{ 
    position:relative; 
    top:-25px; 
} 

.box{ 
border:3px solid rgb(72,174,137); 
width:55%; 
margin:0 auto; 
max-height:210px; 
} 
/* 
.box .img-responsive{ 
    margin-top:-20px; 
} 
*/ 
.para{ 
    text-align: left; 
    margin-right:0; 
    padding-right:0; 
    padding-top:15px; 
} 
.para strong{ 
    font-weight:900; 
    font-size: 16px; 
} 

.second{ 
    margin-bottom:30px; 
    border:1px solid green; 
    width:10%; 
} 
.threebox{ 
    width:90%; 
    margin:0 auto; 
    padding-left:70px; 


} 
.col-md-4{ 
    height:40%; 
} 
.col-md-4 > p{ 
    background-color:white; 
    border:2px solid white; 
    border-top-color:green; 
    width:200px; 
    height:160px; 
    box-shadow:10px 10px 15px; 

} 
.positions{ 
    margin-top:60px; 
    position:relative; 
    margin-bottom:-50px; 
    z-index: 2; 
} 

.positions > h1{ 
    font-size:30px; 
    font-weight:bold; 


} 

.spanf{ 
    font-size:18px; 
    font-weight:bold; 
} 

.features{ 
    text-align: center; 
    padding-bottom:40px; 
    width:100%; 
    margin:0 auto; 
    background-color:rgb(242,243,245); 

    height:1840px; 
    z-index:1; 
    padding-top:120px; 

    border:2px solid red; 
} 


.features .row{ 

    width:65%; 
    margin:0 auto; 
    margin-top:40px; 

    padding-top:30px; 
    padding-left:20px; 
} 



.features button{ 
    border-radius:20px; 
} 


.features img{ 
    /*width:98%; 
    height:98%;*/ 

} 
/* 
.features .row .col-lg-6{ 

    padding-right:15px; 
    padding-left: 2px; 
}*/ 



/* 
.img2{ 
    position:relative; 
    left: 12px; 
top: -12px; 
box-shadow: -2px 2px 9px; 

} 
.img3{ 
    position:relative; 
    top:-12px; 
    left:-12px; 
    box-shadow:2px 2px 9px; 
} 

*/ 

.imgleft, .imgright{ 
    border:2px solid rgb(72,174,137); 
    margin-bottom: 10px; 

} 

.imgleft img{ 
    position:relative; 
    top:-15px; 
    left:15px; 
    box-shadow: 2px 2px 9px; 
} 

.imgright img{ 
    position:relative; 
    top:-15px; 
    left:-15px; 
    box-shadow: -2px 2px 9px; 
} 

.textleft p{ 
    text-align:left; 
} 
.textright p{ 
    text-align: right; 
} 





.pillars{ 
    border:2px solid rgb(72,174,137); 
    background-color: rgb(72,174,137); 
    height:350px; 
    margin-top:0; 
} 

- ここ

はcodepenリンクです。

Answer 1

ピクセル単位で指定しました。できるだけ％を使ってそれらを示すようにしてください。
グリーンボックスの高さにautoを使用できます。緑色のボックスは、テキストの長さに応じて高さを調整します。

1）.usedivからmax-heightを削除するには：

Answer 2

私はあなたのために、現時点で2つのソリューションを持っています。
影響： divsは「もっと長くなる」ようになります。
Check the output here

2）overflow:auto;~.usedivを追加します。
影響： divはまだ最大の高さを持ち、右側のスクロールはユーザーに表示されますが、画像はちょっと台無しになります。の外には divと表示されません。
Check the output here

---

か、 メディアを使用して、特別なCSSを作成することができ、ブートストラップのを照会：
あなたが必要な任意の幅を使用することができ、あなたのCSSの1以上を作成することができます。もちろん、 @media(max-width:480px){}
@media(min-width:800px){}

。そして、あなたのメインスタイルが乱されることはありません。そして、より小さなスペースでは、オーバーフローを使用するかdivの高さを増やすかを問わず、コンテンツを表示する別の方法を選択することができます。