문의 양식 너비 문제

연락처 양식이 데스크톱 및 태블릿 모드에서 어떻게되어 있는지보고 있습니다. 그러나 브라우저를 모바일로 전환하면 이메일 입력이 이름 입력 및 텍스트 상자보다 약간 짧아집니다. 이 문제의 원인은 무엇입니까?문의 양식 너비 문제

#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>

출처

2017-04-09 Cakers

당신은 모바일 제거해야 바탕 화면에 15 픽셀의 패딩이 .

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

출처

2017-04-09 19:14:09 cosmoonot

이렇게 해 주셔서 감사합니다. @cosmoonot! – Cakers

당신은 미디어 쿼리에서 두 번째 아이를 위해 패딩 세트를 재정의해야합니다

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

출처

2017-04-09 19:12:27

너무 대단히 감사합니다 @ 필 필립! – Cakers

도와 드리겠습니다. –

문의 양식 너비 문제

답변

관련 문제