お問い合わせフォームの幅の問題

Question

私のお問い合わせフォームは、デスクトップとタブレットモードでどのように想定されています。しかし、ブラウザをモバイルに切り替えると、メールの入力は、名前の入力とテキストボックスよりわずかに短くなります。この問題の原因は何ですか？

#formsec{ 
 
\t margin-left:20px; 
 
\t margin-right:20px; 
 
} 
 
#worktogether{ 
 
\t text-align: center; 
 
\t color:white; 
 
\t font-size:50px; 
 
\t margin-top:60px; 
 
\t font-family: 'Philosopher', sans-serif; 
 
} 
 

 
form { 
 
\t max-width:1200px; 
 
\t margin: 0 auto 50px;  \t 
 
} 
 

 
input, textarea { 
 
\t border: 3px solid #69EAF5; 
 
\t width:100%; 
 
\t box-sizing:border-box; 
 
\t padding:10px; 
 
} 
 

 
label{ 
 
\t display:block; 
 
\t margin-bottom:20px; 
 
} 
 

 
span{ 
 
\t display:block; 
 
\t color:white; 
 
\t font-size:20px; 
 
} 
 

 
.contact-info-group label{ 
 
\t width: 50%; 
 
    box-sizing: border-box; 
 
\t float:left; 
 
} 
 

 
.contact-info-group label:nth-child(1){ 
 
\t 
 
} 
 

 
.contact-info-group label:nth-child(2){ 
 
\t padding-left:15px; 
 
} 
 

 
input:focus, textarea:focus{ 
 
\t outline: none; 
 
    border-color:#008a91; 
 
} 
 

 
textarea{ 
 
\t height:400px; 
 
} 
 

 
.button-wrap{ 
 
\t margin-left:67%; 
 
\t width:33%; 
 
} 
 

 
[type="submit"]{ 
 
\t background:#097784; 
 
\t border-color:#097784; 
 
\t color:white; 
 
\t font-size: 18px; 
 
\t text-transform: uppercase; 
 
} 
 

 
@media screen and (max-width:480px){ 
 

 
\t .contact-info-group label{ 
 
\t width: 100%; 
 

 
box-sizing: border-box; 
 
\t float:left; \t 
 
\t 
 
\t } 
 
}

<section id="formsec"> 
 
<h3 id="worktogether">Let's Work Together</h3> 
 
    
 
<form id="form2" action="FormToEmail.php" methods="POST"> 
 
    \t <div class="contact-info-group"> 
 
    \t <label><span>Your Name</span> 
 
    \t <input type="text" name="text"></label> 
 
    \t 
 
    \t <label><span>Your Email</span> 
 
\t \t <input type="email" name="_replyto"></label> 
 
\t \t </div> 
 
\t \t 
 
\t <label><span>How Can I Help:</span> \t 
 
    \t <textarea name="message"></textarea></label> 
 
\t 
 

 
<input class="button-wrap" name="submit_to_programmer" type="submit" value="Submit"/> 
 
</form></section>

Answer 1

を第二子のためのパディングセットを上書きする必要があります。

@media screen and (max-width:480px){ 
    .contact-info-group label:nth-child(2) { 
     padding-left:0px; 
    } 
} 

Answer 2

あなたがモバイル用に除去される必要があるデスクトップ用15ピクセルのパディングを持っているメディアクエリで

@media screen and (max-width: 480px) { 
    .contact-info-group label:nth-child(2) { 
    padding-left: 0; 
    } 
}