Change My contact page To Responsive?

Question

I have created an html page (Contact page) which is Working well but its Not Responsive. I have checked and applied media query full CSS its working Responsive.after that check my system not working desktop application now working responsive? how to set my code both desktop and 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;}

            /* ----------- My 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 your name</span>
                </label>
                <input type="text" name="name" placeholder="Enter your Name" id="name" />

                <label for="email">Email
                    <span class="small">Add a valid address</span>
                </label>
                <input type="text" name="email" placeholder="[email protected]" id="email" />

                <label for="phone">Phone
                    <span class="small">Add valid 10 digit your mobile no.</span>
                </label>
                <input type="text" name="phone" placeholder="Enter Your Number" id="phone" />

                <label for="message">Message
                    <span class="small">Write something to us</span>
                </label>
                <textarea placeholder="Write something to us" name="message" id="message"  rows="5"></textarea>

                <button type="submit">Send</button>
                <div class="spacer"></div>

            </form>
        </div>

how to change it Responsive design? please any idea ?now working in desktop well. but not Responsive mobile device ? any idea about it?

Answer 1

@media only screen and (max-width: 565px){
.myform{

                width:100%;
                padding-right:15px;
                padding-left:15px;
            }
}

try this and edit your inner div's width by percentage

Answer 2

Use css3 media queries and you can define the CSS according to mobile device width

Adding to Dinesh's answer, you need to keep both the class in your CSS file

@media only screen and (max-width: 500px)
    {
        .myform
        {
            width: 200px;
        }


    }
    .myform
    {
        margin: 0 auto;
        width: 566px;
        padding: 14px;
    }

Then you can resize the browser to check the effect. Resize to less than 500 px, media queries will be applied. Maximize the browser .myform class will be applied which is not in media query