CODEWITHSUNDEEP
htmlcss
Lewis Ross
Lewis Ross

Reputation: 173

parts of form going off to side when shown on smaller device

So I have an order form which works well but when I test it on smaller screens a part of it goes way off to the side, the rest is how it should be this one part is not for some reason.

This is the html code of the part that goes wrong:

<div class="contact" align="center">
<p>Please tell us who you are</p>
<table border="0" cellpadding="0" width="550" id="table1">

<tr>
<td width="340" align="right">Name</font></td>
<td width="10">&nbsp;</td>
<td width="200"><input type="text" name="name" id="name" required size="30" tabindex="1"></td>
</tr>
<tr>
<td width="340" align="right">Email</font> 
(Your confirmation will be sent here): </td>
<td width="10">&nbsp;</td>
<td width="200"><input type="text" name="email" id="email" required size="30" tabindex="1"></td>
</tr>
<tr>
<td width="340" align="right">Phone number:</td>
<td width="10">&nbsp;</td>
<td width="200"><input type="text" name="number" id="number" required size="30" tabindex="1"></td>
</tr>
<tr>
<td width="340" align="right">Address:</td>
<td width="10">&nbsp;</td>
<td width="200"><input type="text" name="address" id="address" required size="30" tabindex="1"></td>
</tr>
<tr>
<td width="340" align="right">Town:</td>
<td width="10">&nbsp;</td>
<td width="200"><input type="text" name="town" id="town" required size="30" tabindex="1"></td>
</tr>
<tr>
<td width="340" align="right">Postcode:</td>
<td width="10">&nbsp;</td>
<td width="200"><input type="text" name="postcode" id="postcode" required size="30" tabindex="1"></td>
</tr>
<tr>
<td width="340" align="right">County:</td>
<td width="10">&nbsp;</td>
<td width="200"><input type="text" name="county" id="county" required size="30" tabindex="1"></td>
</tr>
<tr>
<td width="340" align="right">&nbsp;</td>
<td width="10">&nbsp;</td>
<td width="200">&nbsp;</td>
</tr>
</table>
</div>

and not sure if it will help but this is the style for the border:

form {

    border-top-style: dotted;
  border-right-style: dotted;
  border-bottom-style: dotted;
  border-left-style: dotted;
}

For dealing with different screen sizes I added:

<meta name="viewport" content="width=device-width, initial-scale=1">

I have attached an image of what is happening to show what I mean:

enter image description here

I'm just not sure why this one bit is doing it and the rest of the form is fine? Any help would be much appreciated

Upvotes: 0

Views: 55

Answers (2)

I&#39;m Limit
I&#39;m Limit

Reputation: 899

I have seen unnecessary code

  • like <td>title</td><td width="10">&nbsp;</td> Can be replace with <td style="padding right: 10px">title</td>
  • blank last row <tr><td>&nbsp;</td></tr> Can be replace with table CSS margin-bottom: 20px;

By the way you need to remove <td width="100"> to <td>

table{
  width: 100%;
  margin-bottom: 20px;
}

tr>td:first-child{
  width:auto;/*340*/
  padding-right: 10px;
}
tr>td:last-child{
  width:auto;/*2pp*/
}

With my JSFiddle Now you can resize to... ~ 331px width (Can be resize less. If cut down size Input's attribute)

Upvotes: 1

Sujan Sundareswaran
Sujan Sundareswaran

Reputation: 2551

Add width: 100%; to the table element. Then adjust the width values you have given to each of the td elements. (I’d advise against a forced width for them, but it’s fine.)

It looks like this now— table

Upvotes: 1

Related Questions