이 응답을내는 방법

Question

나는이 반응을 보이고 싶다. 내 창 크기를 조정할 때마다 모든 것이 끊어집니다.

.first-about { 
 
    margin-left: 220px; 
 
} 
 

 
.home-about1 { 
 
    margin-top: 10px; 
 
    position: relative; 
 
} 
 

 
.home-about1 .fa { 
 
    border-width: 1px; 
 
    border-radius: 50%; 
 
    font-size: 30px; 
 
    padding: 30px; 
 
    float: left; 
 
    margin-right: 220px; 
 
    position: relative; 
 
    z-index: 2; 
 
    background-color: #ff4000; 
 
    box-shadow: 0px 0px 0px 10px white; 
 
    color: white; 
 
} 
 

 
.hireus-text { 
 
    position: relative; 
 
    top: -30px; 
 
    margin-left: 10px; 
 
    border-width: 1px; 
 
    border-top-right-radius: 15px; 
 
    border-top-left-radius: 15px; 
 
    width: 300px; 
 
    height: 150px; 
 
    text-align: center; 
 
    padding-top: 60px; 
 
    float: left; 
 
    z-index: 1; 
 
    background-color: #31708f; 
 
    color: white; 
 
    letter-spacing: 1px; 
 
    font-weight: 700px; 
 
} 
 

 
.hireus-text1 { 
 
    background-color: #31708f; 
 
    margin-left: 110px; 
 
} 
 

 
.hireus-text2 { 
 
    background-color: #a73641; 
 
} 
 

 
.hireus-text3 { 
 
    background-color: #298067; 
 
} 
 

 
.hireus-text4 { 
 
    background-color: #8a5d0f; 
 
} 
 

 
.hireus-summary1 { 
 
    background-color: #31708f; 
 
    margin-left: 110px; 
 
} 
 

 
.hireus-summary2 { 
 
    background-color: #a73641; 
 
} 
 

 
.hireus-summary3 { 
 
    background-color: #298067; 
 
} 
 

 
.hireus-summary4 { 
 
    background-color: #8a5d0f; 
 
} 
 

 
.clear { 
 
    clear: both; 
 
}

<div class="home-about1"> 
 
    <div><i class="fa fa-users first-about" aria-hidden="true"></i></div> 
 
    <div><i class="fa fa-pencil-square-o" aria-hidden="true"></i></div> 
 
    <div><i class="fa fa-line-chart" aria-hidden="true"></i></div> 
 
    <div><i class="fa fa-money" aria-hidden="true" style="margin-left: -10px;"> 
 
    </i></div> 
 
    <div class="clear"></div> 
 
    <div class="hireus-text1 hireus-text"> 
 
    <h2>FRIENDLY SUPPORT</h2> 
 
    </div> 
 
    <div class="hireus-text2 hireus-text"> 
 
    <h2>DETAILED REPORTING</h2> 
 
    </div> 
 
    <div class="hireus-text3 hireus-text"> 
 
    <h2>VERIFIED RESULTS</h2> 
 
    </div> 
 
    <div class="hireus-text4 hireus-text"> 
 
    <h2>COMPETITIVE PRICE</h2> 
 
    </div> 
 
    <div class="clear"></div> 
 
    <div class="hireus-summary1 hireus-summary"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis varius mi sit amet odio porta, at tincidunt mi auctor. Phasellus sed dolor eu mauris convallis interdum. Quisque mattis tincidunt lectus ut convallis. Integer quis metus a dui tristique 
 
     posuere. Nulla ex ex, posuere a gravida et, auctor ut erat.</p> 
 
    </div> 
 
    <div class="hireus-summary2 hireus-summary"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis varius mi sit amet odio porta, at tincidunt mi auctor. Phasellus sed dolor eu mauris convallis interdum. Quisque mattis tincidunt lectus ut convallis. Integer quis metus a dui tristique 
 
     posuere. Nulla ex ex, posuere a gravida et, auctor ut erat.</p> 
 
    </div> 
 
    <div class="hireus-summary3 hireus-summary"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis varius mi sit amet odio porta, at tincidunt mi auctor. Phasellus sed dolor eu mauris convallis interdum. Quisque mattis tincidunt lectus ut convallis. Integer quis metus a dui tristique 
 
     posuere. Nulla ex ex, posuere a gravida et, auctor ut erat.</p> 
 
    </div> 
 
    <div class="hireus-summary4 hireus-summary"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis varius mi sit amet odio porta, at tincidunt mi auctor. Phasellus sed dolor eu mauris convallis interdum. Quisque mattis tincidunt lectus ut convallis. Integer quis metus a dui tristique 
 
     posuere. Nulla ex ex, posuere a gravida et, auctor ut erat.</p> 
 
    </div> 
 
    <div class="clear"></div> 
 
</div>

모든

Answer 1

먼저, 당신의 요소의 폭은 (당신의 블록 300 픽셀)에 고정된다. 따라서 화면이 작을 때 "변경"해야합니다. 당신이 할 수있는, 당신이 당신의 블록이 미디어 쿼리에 응답 할 것인지

• 이 media queries

그래서 프레임 워크 (같은 Bootstrap)

사용을 사용

그래서 당신은이 개 솔루션을 너비를 지정하십시오.

@media screen and (max-width: 991px) { 
    .hireus-text { 
     width: 150px; 
     font-size: 14px; 
    } 
} 

e, 화면 너비가 992px 미만인 경우 (~ 0px에서 991px까지) 요소 "hireus-text"의 너비는 150px입니다.

제 대답은 당신이 어떤 반응을 보이기를 원한다면, 당신이 그것을 할 수있는 다양한 방법을 배워야 할 것입니다. 부트 스트랩과 같은 프레임 워크를 사용한다면 가끔 미디어 쿼리를 사용해야 할 수도 있습니다. :) 행운을 빕니다