arasu arasu - 7 months ago 11
HTML Question

Change My contact page To Responsive?

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="mail@example.com" 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
@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

Comments