聯繫表格寬度問題

我的聯繫表格正在尋找如何在桌面和平板電腦模式下。但是，當我將瀏覽器切換到手機時，電子郵件輸入略短於名稱輸入和文本框。什麼導致這個問題？聯繫表格寬度問題

#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

您有桌面，這就需要移動被刪除15px的填充。

@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

這工作！非常感謝你@Dan Philip！ – Cakers

樂意幫忙。 –

聯繫表格寬度問題

回答

相關問題