width - Making form elements responsive -
i've been trying form elements shrink when on mobile screens.
i've changed widths 100% text input areas still spill out of screen.
what doing wrong exactly?
html
<section id="con" data-type="background" data-speed="10"> <section id="c"> <div class="title">say hello</div> <div id="details"> <p><b>phone:</b> </p> <p><b>email:</b> </p> <p><b>skype:</b> </p> </div> <div id="contactbox"> <form action="contact.php" method="get" id="contactform"> <div id="formleft"> <fieldset> <ul> <li> <label for="first">first name</label> <input type="text" name="first" id="first" tabindex="10"> </li> <li> <label for="last">last name</label> <input type="text" name="last" id="last" tabindex="20"> </li> <li> <label for="company">company name</label> <input type="text" name="company" id="company" tabindex="30"> </li> <li> <label for="email">email</label> <input type="email" name="email" id="email" tabindex="40"> </li> <li> <label for="phone">phone</label> <input type="text" name="phone" id="phone" tabindex="50"> </li> <li> <label for="contactyou">contact by...</label> <br> <select name="contactyou" size="1" id="contactyou" tabindex="60"> <option value="" selected="selected">- select</option> <option value="email">email</option> <option value="phone">phone</option> </select> </li> </ul> </fieldset> </div> <div id="formright"> <fieldset> <ul> <li> <label for="interest">i interested in...</label> <br> <select name="interest" size="1" id="interest" tabindex="80"> <option value="" selected="selected">- select</option> <option>creating new website</option> <option>redesigning current website</option> <option>reponsive web design</option> <option>a wordpress website</option> <option>general enquiry</option> </select> </li> <li> <label for="budget">my budget is...</label> <br> <select name="budget" size="1" id="budget" tabindex="90"> <option value="" selected="selected">- select</option> <option>€100 - €500</option> <option>€500 - €1,000</option> <option>€1,000 - €2,000</option> <option>€2,000 - €5,000</option> <option>€5,000 - €10,000</option> <option>€10,000+</option> </select> </li> <li> <label for="message">how can you?</label> <textarea name="message" id="message" cols="45" rows="5" tabindex="100"></textarea> </li> </ul> </fieldset> </div> <div id="formsubmit"> <ul> <li> <input type="submit" name="submit" id="submit" value="send message" tabindex="70"> </li> </ul> </div> </form> </div> </section> </section> css
#con { width:100%; margin:auto; height:auto; } #c { padding:20px; text-align:center; height:auto; padding-top:110px; } #details { margin:auto; width:100%; height:70px; border-bottom:1px #e0e0e0 solid; } #details p { text-align:center } #contactbox { height:auto; width:100%; text-align:left; } #formleft { font-family: 'open sans', sans-serif; width:100%; overflow:hidden; float:inherit; } #formright { font-family: 'open sans', sans-serif; width:100%; overflow:hidden; float:inherit; height:468px; padding:0px; } #formsubmit { } fieldset { border:none; padding:0px; margin:0px; width:100% } #contactbox ul { list-style:none; width:100%; } #contactbox li { margin-top:10px; width:100%; } input[type="text"],input[type="email"],input[type="tel"],input[type="url"],textarea { border:none; background:#e3cfe2; width:85%; height:40px; margin-top:4px; padding-left:8px; font-size:1em; font-weight:normal; font-family: 'open sans', sans-serif; } label { clear:both; background:yellow; float:left; } textarea { padding-top:6px; height:268px; width:100%; max-height:268px; font-size:1em; font-weight:normal; font-family: 'open sans', sans-serif; } input:focus, textarea:focus { outline:none; -webkit-box-shadow: inset 0px 0px 10px 0px rgba(105,66,100,1); -moz-box-shadow: inset 0px 0px 10px 0px rgba(105,66,100,1); box-shadow: inset 0px 0px 10px 0px rgba(105,66,100,1); } input[type="submit"] { font-family: 'open sans', sans-serif; font-size:1em; background:#694264; color:white; padding:16px; border:none; cursor:pointer; margin:20px 0px; width:100%; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s; } input[type="submit"]:hover { background:#b58bab; color:black; } select { background:#e3cfe2; height:42px; width:100%; border:none; margin-top:4px; padding-left:8px; font-family: 'open sans', sans-serif; } option { background:white; }
add - meta name="viewport" content="width=device-width, initial-scale=1" @ meta tag.
Comments
Post a Comment