Make form responsive - html

Question

I am making a form inside of jumbotron and for some reason I get it to look good on desktop view but when viewing it mobile it goes out of the jumbotron. I am using netbeans to do my coding. I even use #media (max-width: 620px). I tried using google but failed :(
#wrapper{
width: 500px;
height: 700px;
position: relative;
margin: 0 auto;
background-color: rgba(255,255,255,.75);
text-align: center;
}
form{
color: black;
text-align: center;
}
div{
clear: both;
}
#off{
background-color: rgba(225,0,0,.85);
color: white;
width: 525px;
height: 140px;
font-size: 1rem;
text-align: center;
}
.formHeader{
color: #104c8b;
}
.formFooter{
background-color: rgba(0,0,255,.5);
color: white;
margin: 65px 0 0 0;
}
#media(max-width: 620px) {
#wrapper{
width: 100px;
height: 100px;
position: relative;
margin: 0 auto;
background-color: rgba(255,255,255,.75);
text-align: center;
}
<section id="top" class="jumbotron">
<div class="container-fluid">
<div class="row text-center">
<div id="wrapper"><p>Contact Form</p>
<div class="formHeader">
</div>
<form action="test.html" method="get" name="test" id="myForm">
<label>Name</label><input name="name" type="text" /><br>
<label>Email</label><input name="email" type="text" /><br>
<label>Phone</label><input name="number" type="text" /><br>
<input type="submit" value="Send"/>
</form>
<div class="formFooter">
</div>
</div>
</div>
</div>
</section>

Answer 1

Given that you're using Bootstrap as a framework it seems a shame not to make use of all of well... the framework. With some restructuring of your HTML (to make use of Bootstrap's responsive classes and form controls) you can easily achieve the responsiveness you desire.
Most of it is just adding the necessary .col-*-* for grid layouts, and of course applying Bootstrap classes to your input and label elements, etc. An example Bootply is below though the code is significantly altered to better-reflect Bootstrap's Framework and modern input classifications (like tel or email, etc).
http://www.bootply.com/mPNCZyXbbD
The HTML:
<section id="top" class="jumbotron">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="form-wrapper text-center">
<p>Contact Form</p>
<form action="test.html" method="get" name="test" id="myForm" class="form form-horizontal">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input name="name" type="text" class="form-control">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input name="email" type="email" class="form-control">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Phone</label>
<div class="col-sm-10">
<input name="number" type="tel" class="form-control">
</div>
</div>
<button type="submit" class="btn btn-default">Send</button>
</form>
</div>
</div>
</div>
</div>
</section>
And the CSS:
.form-wrapper {
padding: 15px;
background: rgba(255,255,255,0.75);
}