Input Fields Do Not Resize Properly with Browser

248
July 25, 2017, at 9:43 PM

Ok, when resizing a browser the input fields do not resize properly and will overlap each other in the middle and get distorted before the media script kicks in and sets everything to 100%. The text area width 100% does not line up with the forms. Dealing with this contact form has been exhausting, and I haven't even tried to figure out how to get it to send an email yet lol...

https://p.w3layouts.com/demos_new/template_demo/01-07-2017/my_design-demo_Free/528613908/web/index.html

Bonus question: Why does input have to be wrapped in a span or it completely ignores parent divs boundaries??

Per request, here is the JSFIDDLE script. https://jsfiddle.net/LxLux35m/1/

HTML

<div class="Block">
    <div class="BlockWrapper">
        <div class="BlockSizer2">
            <form ID="ContactForm" action="#" method="post">
                <h1>Contact Me</h1>
                <p>Lorem ipsum primis in faucibus. Praesent faucibus massa elit, vitae ultrices libero dapibus nec. Maecenas cursus rutrum odio ut convallis. Curabitur viverra est in diam tincidunt, nec tincidunt tortor dapibus.</p>
                <span><input type="text" name="Name" placeholder="Name" required="" /></span>
                <span class="ContactFormRight"><input class="" type="text" name="Subject" placeholder="Company Name" required="" /></span>
                <span><input type="email" name="Email" placeholder="Email" required="" /></span>
                <span class="ContactFormRight"><input type="text" name="Phone" placeholder="Phone" required="" /></span>
                <span class="textarea"><textarea name="Message" placeholder="Message..." required></textarea></span>
                <span class="ContactFormButton"><input type="submit" value="Submit"></span>
            </form>
        </div>
        <div class="BlockSizer2">
        </div>
    </div>
</div>

CSS

.Block {
    width: 100%;
    background-color: #edeeef;
    padding: 50px 0;
}
.Block:nth-of-type(odd) {
    background-color: #ffffff;
}
.Block:After {
    content: '';
    display: block;
    clear: both;
    overflow: hidden;
    Zoom: 1;
    height: 0;
}
.BlockWrapper {
    text-align: center;
    Max-Width: 60%;
    margin: 0 auto;
}
.BlockSizer1, .BlockSizer2, .BlockSizer3 {
    float: left;
    text-align: left;
}
.BlockSizer1 {
    Width: 100%;
}
.BlockSizer2 {
    width: 49%;
}
.BlockSizer3 {
    width: 33%;
}
#ContactForm {
    Padding: 5px;
}
#ContactForm span {
    width: 49%;
    padding: 5px 0 0 0; 
    display: inline-block;
}
#ContactForm > .textarea {
    width: 100%;
}
#ContactForm > .textarea textarea {
    width: 98%;
    Min-Height: 200px;
    margin: 1em 0 1em 0em;
}
#ContactForm input {
    width: 92%;
    color: #999999;
    outline: none;
    padding: 10px;
    Border: 1px solid #a0a0a0;
}
.ContactFormButton, .ContactFormButton input {
    Width: 100% !important;
}
@Media screen and (max-width: 1000px) {
    div.ContactForm, div.ContactFormRight {
        width: 100%;
        Margin: 5px 0;
        float: none;
        padding: 0;
    }
}
textarea.ContactForm {
    width: 100%;
    padding: 10px;
    Min-Height: 200px;
}
Answer 1

check this code just update your media query

@media screen and (max-width: 1000px) {
    div.ContactForm, div.ContactFormRight {
        width: 100%;
        Margin: 5px 0;
        float: none;
        padding: 0;
    }
    .BlockWrapper {
        width: 100%;
    }
    .BlockSizer2 {
        width: 100%;
    }
}

then your width will be 100%

<div class="Block"> 
    <div class="BlockWrapper"> 
        <div class="BlockSizer2"> 
            <form ID="ContactForm" action="#" method="post"> 
                <h1>Contact Me</h1> 
                <p>Lorem ipsum primis in faucibus. Praesent faucibus massa elit, vitae ultrices libero dapibus nec. Maecenas cursus rutrum odio ut convallis. Curabitur viverra est in diam tincidunt, nec tincidunt tortor dapibus.</p> 
                <span><input type="text" name="Name" placeholder="Name" required="" /></span> 
                <span class="ContactFormRight"><input class="" type="text" name="Subject" placeholder="Company Name" required="" /></span> 
                <span><input type="email" name="Email" placeholder="Email" required="" /></span> 
                <span class="ContactFormRight"><input type="text" name="Phone" placeholder="Phone" required="" /></span> 
                <span class="textarea"><textarea name="Message" placeholder="Message..." required></textarea></span> 
                <span class="ContactFormButton"><input type="submit" value="Submit"></span> 
            </form> 
        </div> 
        <div class="BlockSizer2"> 
 
        </div> 
    </div> 
</div> 
 
<style> 
    .Block { 
    width: 100%; 
    background-color: #edeeef; 
    padding: 50px 0; 
} 
 
.Block:nth-of-type(odd) { 
    background-color: #ffffff; 
} 
 
.Block:After { 
    content: ''; 
    display: block; 
    clear: both; 
    overflow: hidden; 
    Zoom: 1; 
    height: 0; 
} 
 
.BlockWrapper { 
    text-align: center; 
    Max-Width: 60%; 
    margin: 0 auto; 
} 
 
.BlockSizer1, .BlockSizer2, .BlockSizer3 { 
    float: left; 
    text-align: left; 
} 
 
.BlockSizer1 { 
    Width: 100%; 
} 
 
.BlockSizer2 { 
    width: 49%; 
} 
 
.BlockSizer3 { 
    width: 33%; 
} 
#ContactForm { 
    Padding: 5px; 
} 
 
#ContactForm span { 
    width: 49%; 
    padding: 5px 0 0 0; 
    display: inline-block; 
} 
 
#ContactForm > .textarea { 
    width: 100%; 
} 
 
#ContactForm > .textarea textarea { 
    width: 98%; 
    Min-Height: 200px; 
    margin: 1em 0 1em 0em; 
} 
 
#ContactForm input { 
    width: 92%; 
    color: #999999; 
    outline: none; 
    padding: 10px; 
    Border: 1px solid #a0a0a0; 
} 
 
.ContactFormButton, .ContactFormButton input { 
    Width: 100% !important; 
} 
 
textarea.ContactForm { 
    width: 100%; 
    padding: 10px; 
    Min-Height: 200px; 
} 
 
@media screen and (max-width: 1000px) { 
    div.ContactForm, div.ContactFormRight { 
        width: 100%; 
        Margin: 5px 0; 
        float: none; 
        padding: 0; 
    } 
 
    .BlockWrapper { 
        width: 100%; 
    } 
    .BlockSizer2 { 
        width: 100%; 
    } 
 
} 
 
</style>

Answer 2

Here is a cleaner version, without the span issue :

.Block { 
	width : 350px; 
	margin : auto; 
	margin-top : 25px; 
} 
 
#contactform .flex { 
	display : flex; 
	justify-content : space-between; 
	margin-top : 15px; 
} 
 
#contactform .flex input { 
	width : 47%; 
	height : 35px; 
	padding : 5px; 
} 
 
#contactform textarea { 
	width : 100%; 
	height : 100px; 
	margin-top : 15px; 
} 
 
#contactform #submit { 
	display : block; 
	margin : auto; 
	margin-top : 15px; 
	width : 100%; 
	height : 35px; 
	cursor : pointer; 
}
<div class="Block"> 
 
	<h1>Contact Me</h1> 
	<p>Lorem ipsum primis in faucibus. Praesent faucibus massa elit, vitae ultrices libero dapibus nec. Maecenas cursus rutrum odio ut convallis. Curabitur viverra est in diam tincidunt, nec tincidunt tortor dapibus.</p> 
	 
	<form id="contactform" action="#" method="post"> 
	 
		<div class="flex"> 
			<input type="text" name="Name" placeholder="Name" required /> 
			<input type="text" name="CompanyName" placeholder="Company Name" /> 
		</div> 
		<div class="flex"> 
			<input type="text" name="Email" placeholder="Email" /> 
			<input type="text" name="Phone" placeholder="Phone" /> 
		</div> 
		 
		<textarea name="Message" placeholder="Message..."></textarea> 
		 
		<input id="submit" type="submit" value="Submit"/> 
	 
	</form> 
	 
</div>

READ ALSO
Loading javascript effect inside DIV element

Loading javascript effect inside DIV element

So I found this effect and I'm trying to modify it to be loaded inside a DIV myeffect, for example:

301
Anchors with fixed navigation and sticky header

Anchors with fixed navigation and sticky header

As you can see in this jsfiddle , I have a navbar and a sticky header per divNow if i click on my anchors I get scrolled down to the right position, but the header overlaps the text of the div

229
Can I use both zoom and scale for my website

Can I use both zoom and scale for my website

I am trying to reduce my website page screen so that it fits in more stuffI was able to accomplish this using the transform css

223
Prevent scroll in textbox

Prevent scroll in textbox

If my textbox happens to be focused and you use the scroll within it, the page scroll gets buggedIn other words, it looks like I am scrolling within my textbox rather than the page, which causes me to have to reload the page if I want to remove the bug

347