How to stack 3 elements under each other when phone display- - css

Question

I am trying to style - newsletter - input - submit so that when you see the web in your phone the three elements show up one under the other- and all the boxes in the same size and align.
Does anyone have an easy solution for this? Ill appreciate your help very much. Regards and thanks! http://vtwg.eu/michael/index.html
V
<div id="contact-area">
<form method="post" action="contactengine.php">
<label for="Name">NEWSLETTER</label>
<input type="text" name="Name" id="Name" />
<input type="submit" name="submit" value="SUBMIT" class="submit-button" />
</form>
</div>
input {
padding: 5px;
width: 120px;
font-family: arial, sans-serif;
font-size: 1em;
margin: 0px 0px 4px 0px;
border: 3px solid black;
background: white;
}
.submit-button {
float: center;
font-size: 1em;
}
label {
font-family: arial;
text-align: center;
width: 120px;
padding: 5.5px;
background:#57007F;
border: 3px solid black;
margin-left: 20px;
}

Answer 1

If you want to change design elements for mobie view, you should use media query. In the snippet media query set to max-width of viewport equal 480px. You can change this value as you wish. When you narrow browser window
down to less than 480px, you'll see the diference.
input {
display: inline-block;
padding: 5px;
width: 120px;
font-family: arial, sans-serif;
font-size: 1em;
margin: 0px 0px 4px 0px;
border: 3px solid black;
background: white;
}
.submit-button {
font-size: 1em;
display: inline-block;
}
label {
font-family: arial;
text-align: center;
width: 120px;
padding: 5.5px;
background:#57007F;
border: 3px solid black;
margin-left: 20px;
display: inline-block;
}
#media screen and (max-width: 480px) {
input, .submit-button, label {
display: block;
width: 120px;
margin: 5px;
box-sizing: border-box;
}
}
<div id="contact-area">
<form method="post" action="contactengine.php">
<label for="Name">NEWSLETTER</label>
<input type="text" name="Name" id="Name" />
<input type="submit" name="submit" value="SUBMIT" class="submit-button" />
</form>
</div>

Answer 2

Write styles in media query with respect to the resolution.
HTML:
<div id="contact-area">
<form method="post" action="contactengine.php">
<label for="Name">NEWSLETTER</label>
<input type="text" name="Name" id="Name" />
<input type="submit" name="submit" value="SUBMIT" class="submit-button" />
</form>
</div>
CSS:
input {
padding: 5px;
width: 120px;
font-family: arial, sans-serif;
font-size: 1em;
margin: 0px 0px 4px 0px;
border: 3px solid black;
background: white;
}
.submit-button {
float: center;
font-size: 1em;
}
label {
font-family: arial;
text-align: center;
width: 120px;
padding: 5.5px;
background:#57007F;
border: 3px solid black;
margin-left: 20px;
}
#media only screen and (max-width: 767px) {
label,
#Name,
.submit-button
{
width: 100%;
display: block;
margin: 5px 0;
box-sizing: border-box;
}
}