cssとhtmlを使用したレスポンシブデザイン

Question

私は、デスクトップとモバイルデバイス用のレスポンシブなフォームデザインを構築しています。 次のようなコードを書いていますがうまくいきますが、モバイル画面の幅のようにウィンドウのサイズを変更すると、左右の余白が少し大きくなります。私は私が多くのことをしようとした左右の余白のスペースを最小限に抑えるが、失敗にしたいいくつかのいずれかが私を助けることができるしてください

.main_container { 
 
    position: relative; 
 
    width: 100%; 
 
    border-top: 2px solid #e4e4e4; 
 
    border-bottom: 2px solid #e4e4e4; 
 
    overflow: hidden; 
 
} 
 

 
.main_container:after { 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 100px 100px 0 100px; 
 
    border-color: #007bff transparent transparent transparent; 
 
} 
 

 
.left_parent { 
 
    float: left; 
 
} 
 

 
.left_child { 
 
    padding-right: 2%; 
 
    padding-left: 0%; 
 
    text-align: center; 
 
} 
 

 
.right_child { 
 
    padding-right: 0%; 
 
    padding-left: 0%; 
 
    text-align: center; 
 
    /*width: 40%;*/ 
 
} 
 

 
.right_parent { 
 
    float: left; 
 
} 
 

 
.left_uppper_text { 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-size: 130%; 
 
    text-align: justify; 
 
    margin-right: 3%; 
 
    color: #847979; 
 
} 
 

 
.left_bottom_text { 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-size: 81%; 
 
    color: #bbb; 
 
    font-weight: bold; 
 
} 
 

 
.main_child { 
 
    margin: auto; 
 
    padding: 0% 0% 0% 27%; 
 
    overflow: hidden; 
 
    margin: auto; 
 
    width: 50%; 
 
    /* border: 3px solid green; */ 
 
    padding: 10px; 
 
} 
 

 
.input_email { 
 
    width: 67%; 
 
    padding: 3% 17px; 
 
    box-sizing: border-box; 
 
    margin: 8px 0; 
 
} 
 

 
.input_button { 
 
    max-width: 190px; 
 
    min-width: 84px; 
 
    padding: 3% 20px; 
 
    box-sizing: border-box; 
 
    margin: 8px 0; 
 
    background-color: rgba(245, 0, 83, 0.73); 
 
    color: white; 
 
    border: none; 
 
    border-top: 2px solid rgba(245, 0, 83, 0.73); 
 
    border-bottom: 2px solid rgba(245, 0, 83, 0.73); 
 
}

<div class="main_container"> 
 

 
    <div class="main_child"> 
 

 
    <div class="left_parent"> 
 

 
     <div class="left_child"> 
 
     <span class="left_uppper_text"> Join over 20,2000 blog subscriber </span> <br> 
 
     <span class="left_bottom_text"> We guarantee 100% customer satisfaction</span> 
 
     </div> 
 

 
    </div> 
 

 
    <div class="right_parent"> 
 

 
     <div class="right_child"> 
 
     <input type="text" class="input_email"> 
 
     <button class="input_button">Subscribe</button> 
 
     </div> 
 

 
    </div> 
 

 
    </div> 
 
</div>

Answer 1

だから、あなたは@mediaクエリを使用して任意の画面サイズで、スタイルを操作することができます。あなたがここに@mediaクエリの詳細を読むことができます

@media (max-width: 768px /* Mobile size */) { 
    /* Element you want to style at this screen size */ 
    .element { 
     margin: 5px; /* Or whatever style you want */ 
    } 
} 

：あなたのケースでは、次のようになりますスニペットに変換https://www.w3schools.com/cssref/css3_pr_mediaquery.asp