Link to website
This final step is all that stands between me and the completion of my website deployment. However, I am faced with a persistent issue that has me stumped. It seems that there is an unexplained margin on the left side of the contact form, throwing off the measurements. Upon closer inspection of the borders I've set for testing, I realize that it should be perfectly aligned and centered with the green border of my content on medium and small device screens. Yet, when I shrink the page down on a modern browser like Firefox, the form shifts to the left and creates an unwanted margin on the right side. Surprisingly, the appearance remains consistent across both modern browsers and IE, which is a positive. Any proposed fixes should ideally remain compatible with these older browsers as well. I have tried adjusting the width of the form and experimenting with container layouts (similar to what I did for the social icons), but so far, no luck (unless I'm missing something). If anyone can assist me in resolving this issue, I would greatly appreciate it. I'll be online throughout the weekend, continuously making updates and changes, allowing you to see the impact of your suggestions immediately.
Visual Representation of problem:
Placeholder for visual representation
HTML:
<div id="main_section">
<div id = "center">
<div id="contact_section">
<form method="POST" action="contact.php">
<span class="label">Name</span><br/>
<input type="text" class="textfield" name="name" size="50" maxlength="50"><br/>
<span class="label">Email</span><br/>
<input type="text" class="textfield" name="email" size="50" maxlength="50"><br/>
<span class="label">Subject</span><br/>
<input type="text" class="textfield" name="subject" size="50" maxlength="50"><br/>
<span class="label">Message</span><br/>
<textarea rows="5" cols="50" name="message" id="textarea" maxlength="500"></textarea><br/>
<input type="submit" value="Send" id="submit" name="action">
</form>
</div>
</div>
</div>
Main CSS:
#contact_section {
max-width:100%;
margin-bottom:40px;
margin-right: 0px;
margin-top:20px;
padding: 20px 6px 20px 6px; /*Make this smaller for 100% responsiveness*/
border-radius:10px;
background:#f1f1f1;
box-shadow:0px 0px 15px #272727;
float:right;
text-align:center;
}
Medium and small screen CSS:
#center{
width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
max-width:100%;
border: 1px red solid;
text-align:center;
}
#contact_section {
width:95%;
max-width:100%;
margin-left: auto;
margin-right: auto;
text-align:center;
border: 1px yellow solid;
}