CODEWITHSUNDEEP
htmlcss
Cakers
Cakers

Reputation: 655

Contact form width issue

My contact form is looking how it is supposed to in desktop and tablet mode. However, when I switch my browser to mobile the email input in slightly shorter than the name input and the text box. What is causing this issue?

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

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

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

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

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

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

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

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

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

textarea{
	height:400px;
}

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

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

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

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

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

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

Upvotes: 0

Views: 46

Answers (2)

cosmoonot
cosmoonot

Reputation: 2189

You have 15px padding for desktop, which needs to be removed for mobile.

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

Upvotes: 2

Dan Philip Bejoy
Dan Philip Bejoy

Reputation: 4391

You'll have to override the padding set for the second child in media query

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

Upvotes: 2

Related Questions