All geek questions in one place

How to resize a form / table using media queries

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 the table and all its functions to be smaller when viewed under 480px for phones with small devices / etc. I do not know what to specify 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 the original size, even if I put the form in a div that still doesn't work, maybe the div is not needed anyway ... any help would get a lot reward!

Thanks!

+4
source share
2 answers

You need to do a few things to make this work.

  • Firstly, this external div is not required, so we can get rid of it.
  • Secondly, you need to change the width of the table in the media query. I used a percentage value (for responsiveness), but you can set it to a pixel value if you want (under 480px, of course)
  • Thirdly, you need to set the width in the media request for input / textarea. Without this, they will occupy the width specified in the 'size' attribute and will cause a horizontal scroll bar.

This is where the media query is used:

 @media only screen and (max-width: 480px) { table { width:95%; } input[type=text], textarea { width:75%; } }

Demo: http://jsfiddle.net/hABGX/2/

+6
source

this does not work because your table has a style and this style has a width of 400 pixels. Try putting 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 won’t work very well because you still have enough content to display at 100px ... so I recommend that you resize to about 250 pixels. If you really want you to have 100px I recommend, you make the table differently.

+3
source

Source: https://habr.com/ru/post/1496842/

More articles:


All Articles