Question

So I can fill out the form on the desktop size but when I got to fill it out on mobile sizes (640, 480, and 320) it doesn’t let me. I found out something by trying things and just happen to have my cursor outside my contactform div that has the form inside it. Then it let me type in everything but the message box unless I use tab and am still outside the div. I find it odd?

benlevywebdesign.com
The bottom of the page is where the form is for you to test out the mobile layouts for 640, 480, and 320.

Here is the contact form

<form id="form1" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">    

        <fieldset>
            <p class="form">
                <label for="name">Name</label>
                <input type="text" name="name" id="name" size="30" />
            </p>
            <p class="form">
                <label for="email">Email</label>
                <input type="text" name="email" id="email" size="30" />
            </p>
            <p class="form">
                <label for="web">Website</label>
                <input type="text" name="web" id="web" size="30" />
            </p>            
        </fieldset>
        <fieldset>                                                                          
            <p class="form">
                <label for="message">Message</label>
                <textarea name="message" id="message" cols="30" rows="10"></textarea>
            </p>                                
        </fieldset>                 

        <p class="submit"><button name="submit" type="submit">Send</button></p>

    </form>

Here is my css style for 480 and 320

@media screen and (max-width:480px){

@media screen and (max-width:320px){


#form1{
    padding-top:5px;
    }

#form1 fieldset{
    margin:0;
    padding:0;
    border:none;    
    float:left;
    display:inline;
    width:190px;
    margin-left:15px;
    }

#form1 legend{display:none;}    
#form1 p{margin:.5em 0;}    
#form1 label{display:block;}    
#form1 input, #form1 textarea{      
    width:175px;
    border:1px solid #B7B7B7;
    background:#fff;
    padding:3px;
    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
    }   

#form1 textarea{
    height:120px;
    width:175px;
    overflow:auto;
    }   

#form1 p.submit{
    clear:both;
    padding:0 25px 5px 25px;
    margin:0;
    text-align:right;
    }   

#form1 button{
    font-family:Trebuchet MS;
    font-size:14px;
    width:105px;
    height:35px;        
    border:none;
    background-color:#484749;
    color:#fff;
    border-radius:4px;
    cursor:pointer;
    text-align:center;
    }

Answer 1

Have you tried resizing your browser and viewing your site on a PC (I’m using FF), it goes all kinds of screwy. Also Firebug says you have 15 errors and 10 warnings – might be worth trying to fix these first before going back to mobile devices.

Heres a short video of the issues: http://screencast-o-matic.com/watch/clhwo4GGI