html - Change My contact page To Responsive? -

i have created html page (contact page) working not responsive. have checked , applied media query full css working responsive.after check system not working desktop application working responsive? how set code both desktop , mobile device in responsive ?

my css code:

        body{                 font-family:verdana, arial, helvetica, sans-serif;                 font-size:14px;             }             p, h1, form, button{border:0; margin:0; padding:0;}             .spacer{clear:both; height:1px;}              /* ----------- form ----------- */             .myform{                 margin:0 auto;                 width:566px;                 padding:14px;             }              /* ----------- contact ----------- */             #contact{                 background: none repeat scroll 0 0 #c6c6c6;                 border: 2px solid #8b8b8b;                 border-radius: 10px;                 -moz-border-radius: 10px;                 -op-border-radius: 10px;                 -webkit-border-radius: 10px;             }             #contact h1 {                 font-weight:bold;                 margin-bottom:8px;             }             #contact p{                 font-size:11px;                 color:#666666;                 margin-bottom:20px;                 border-bottom:solid 1px #7e7e7e;                 padding-bottom:10px;             }             #contact label{                 display:block;                 font-weight:bold;                 text-align:right;                 width:193px;                 float:left;             }             #contact .small{                 color:#666666;                 display:block;                 font-size:11px;                 font-weight:normal;                 text-align:right;                 width:193px;             }             #contact input,#contact textarea{                 float:left;                 border:solid 1px #aacfe4;                 width:284px;                 margin:2px 0 20px 10px;                 border-radius: 15px;                 -moz-border-radius: 15px;                 -op-border-radius: 15px;                 -webkit-border-radius: 15px;                 font-size: 14px;             }              #contact input{                 height: 25px;                 padding: 4px 10px;             }             #contact textarea{                 padding: 10px 10px;                 overflow: auto;             }             /* ----------- form button ----------- */             #contact button {                background: #2c3e4a;                background: -webkit-gradient(linear, left top, left bottom, from(#919496), to(#2c3e4a));                background: -webkit-linear-gradient(top, #919496, #2c3e4a);                background: -moz-linear-gradient(top, #919496, #2c3e4a);                background: -ms-linear-gradient(top, #919496, #2c3e4a);                background: -o-linear-gradient(top, #919496, #2c3e4a);                padding: 5px 10px;                -webkit-border-radius: 15px;                -moz-border-radius: 15px;                border-radius: 15px;                margin-left: 315px;                color: white;                font-size: 20px;                text-decoration: none;                vertical-align: middle;             }             #contact button:hover {                background: #3d4b54;                color: #ccc;             } 

contact html page

  <div id="form-wrapper" class="myform">              <div id="contact" class="myform">              <form id="form" name="form" method="post" action="mail.php">                  <h1>contact us</h1>                  <label for="name">name                     <span class="small">add name</span>                 </label>                 <input type="text" name="name" placeholder="enter name" id="name" />                  <label for="email">email                     <span class="small">add valid address</span>                 </label>                 <input type="text" name="email" placeholder="mail@example.com" id="email" />                  <label for="phone">phone                     <span class="small">add valid 10 digit mobile no.</span>                 </label>                 <input type="text" name="phone" placeholder="enter number" id="phone" />                  <label for="message">message                     <span class="small">write us</span>                 </label>                 <textarea placeholder="write us" name="message" id="message"  rows="5"></textarea>                  <button type="submit">send</button>                 <div class="spacer"></div>              </form>         </div> 

how change responsive design? please idea ?now working in desktop well. not responsive mobile device ? idea it?

@media screen , (max-width: 565px){ .myform{                  width:100%;                 padding-right:15px;                 padding-left:15px;             } } 

try , edit inner div's width percentage