How to resize a form/table using media queries - html

Question

Here is my code:
<form name="htmlform" method="post" action="html_form_send.php">
<div id="table">
<table width="400px" style="margin-top: 50px; margin-left: 20px; color: #FFF">
</tr>
<tr>
<td valign="top">
<label for="name">Name *</label>
</td>
<td valign="top">
<input type="text" name="name" maxlength="50" size="30" style="margin-bottom: 10px">
</td>
</tr>
<tr>
<td valign="top">
<label for="email">Email Address *</label>
</td>
<td valign="top">
<input type="text" name="email" maxlength="80" size="30" style="margin-bottom: 10px">
</td>
</tr>
<tr>
<td valign="top">
<label for="telephone">Telephone Number</label>
</td>
<td valign="top">
<input type="text" name="telephone" maxlength="30" size="30" style="margin-bottom: 10px">
</td>
</tr>
<tr>
<td valign="top">
<label for="enquiry">Enquiry *</label>
</td>
<td valign="top">
<textarea name="enquiry" maxlength="1000" cols="32" rows="6"></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<input type="submit" value="Submit">
</td>
</tr>
</table>
</div>
</form>
And i want to make the table and all its features smaller when viewed below 480px wide for small devices phones/etc. I don't know what to reference when using a media query:
#media only screen and (max-width: 480px) {
#table {
width: 100px;
}
This css above doesn't work, it resizes the div but the content is still original size even if i put the form in the div it still doesn't work, perhaps the div is not required anyway... any help would receive major kudos!!
Thanks!

Answer 1

You need to do a few things to make this work.
First, that outer div isn't required so we can get rid of it.
Second, you need to change the width of your table in the media query. I used a percentage value (for responsiveness) but you can set it to a pixel value if you desire (under 480px of course)
Third, you need to set a width in your media query for the inputs/textarea. Without this, they will take up the widths specified in the 'size' attribute and will cause the horizontal scroll bar to appear.
Here's the media query I used:
#media only screen and (max-width: 480px) {
table {
width:95%;
}
input[type=text], textarea {
width:75%;
}
}
Demo: http://jsfiddle.net/hABGX/2/

Answer 2

it doesn't work because your table has a style to, and that style is syaing the table has a width of 400px. Try to put this:
<table style="margin-top: 50px; margin-left: 20px; color: #FFF; width:100%">
instead of this:
<table width="400px" style="margin-top: 50px; margin-left: 20px; color: #FFF">
it wont work very well because you still have enought content to show in 100px...so i recomend you change the size to about 250px. If you really want it to have 100px i recomend you make the table in a diferent way.