Using something like break in CSS - html

Question

Since not everyone will be browsing the web on a computer, I need to use CSS to adapt to different screen sizes. I am working on the front-end part of the registration form, register.php. The issue is, on the computer the field name and field input position nicely. However, for the smaller screens (maximum width of 520px) I need the field name and field input to be on
top/bottom of each other, field input being on top of its field name.
HTML:
#formBody{
border-radius: 10px;
background-color: #3385ff;
padding-left: 5%;
padding-right: 5%;
padding-top: 0.5em;
padding-bottom: 0.5em;
width: 90%;
max-width: 50em;
margin: auto;
}
.field{
margin: auto;
width: 66.6%;
}
.fieldDescription{
width: 33%;
color: black;
font-size: 1.2em;
}
.fieldInput{
width: 33%;
margin: auto;
}
.input{
width: 100%;
background-color: #e6f0ff;
border-style: none;
}
CSS:
<div id="formBody">
<table>
<form>
<tr class="field">
<td class="fieldDescription">
<p>First Name:</p>
</td>
<td class="fieldInput">
<input class="input" name="firstname" type="text">
</td>
</tr>
</form>
</table>
</div>
I used an HTML table to give each field its own space. I used the <tr> element to make a row for each field, and used two <td>element to put the field name and field input in its own column. This works great for a computer screen, but it doesn't work on the smaller screen (like a smartphone). If I use something like <p class="fieldDescription">Fist Name:</p> for the field name, then <input class="fieldInput" name="firstName" type="text"> for the field input, then I'm hard coding only for small screens.
Is there a way to satisfy both screen sizes, without having to hard code it either way? I would prefer to not use Javascript. I would like to do it CSS.
Click here for the HTML
Click here for the CSS
(both are on gist.github.com)

Answer 1

I'll highly recommend you to use valid and semantic form elements like label and fieldset. But to address your question:
#media screen and (max-width: 520px) {
#mainContainer {
border-radius: 5px;
}
#formBody {
border-radius: 0px;
}
.fieldDescription,
.fieldInput {
width: 100%;
display: inline-block;
}
.fieldDescription p {
margin-bottom: 0;
}
}

Answer 2

A Few Things to tell:
What you are looking for is making responsive designs. You should take a look to Media Queries
I Highly recomend not to use tables in cases like this, just use a table when u REALLY need a table
Here is a LIVE EXAMPLE with the HTML and CSS code of what you want to do. (Resize the browser to see).
Try not to style your forms with <p> <tr> <td> and so on... Use <label> instead.
Hope this work.

Answer 3

#media + display:block; should be basicly what you need:
#media screen and (max-width: 520px) {
table,/* to spray whole space as block does */
tbody,/* because it is there even not in the code :) */
tr,/* this too must be a block */
td /* goal to reach to start from */{
display: block;
}
}
#media screen and (max-width: 520px) {
table,
tbody,
tr,
td {
display: block;
text-align: center;
}
}
/* copy to match snippet size */
#media screen and (max-width: 700px) {
table,
tbody,
tr,
td {
display: block;
text-align: center;
}
}
/* warning */
legend {
color: tomato;
}
<div id="formBody">
<form>
<fieldset>
<legend>Put that form around the table not in between table & tr tags !!</legend>
<table>
<tr class="field">
<td class="fieldDescription">
<p>First Name:</p>
</td>
<td class="fieldInput">
<input class="input" name="firstname" type="text">
</td>
</tr>
</table>
</fieldset>
</form>
</div>
And demo including your style