I've run into a little issue that I could use some help with.
So, here's the situation:
I've created a contact form with several input fields. The problem is that these input fields are taking up about half of their containing div on a regular-sized page. However, when I view the webpage in a browser and resize it, the page can become smaller than the input fields.
Here's what I'm hoping to achieve:
I'd like the input fields to be able to resize themselves so they fit nicely inside the div without overflowing or overlapping outside of it.
I've tried looking for solutions on both Stack Overflow and Google, but I haven't had much luck finding exactly what I need.
Below is the HTML for my contact form:
<div id="contact-formulier">
<form method="post" action="contact.php">
<label>Naam*</label>
<input name="naam" placeholder="Graham Neal" required>
</form>
</div>
And here's the CSS styling for the form:
input, textarea {
width:439px;
height:27px;
background:#efefef;
border:1px solid #dedede;
padding:10px;
margin-top:3px;
font-size:0.9em;
color:#3a3a3a;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
textarea {
height:213px;
}
input:focus, textarea:focus {
border:1px solid #97d6eb;
}