How to resize a form/table using media queries

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.