Form elements not responding on smaller screen computer

Hi there,

I am building this website popundernetwork (According to forum rules, I cannot enter the complete url) - I work on a small screen computer and when I check on the Form on the site homepage, I am not able to focus and click on either the two text input fields nor the submit button. However, when I zoom out the page and view it in smaller font, the focus and click happen seamlessly.

I tried the same on a big computer where the focus happened correctly, but when I zoom in and view it in larger font, I am unable to click into either the text fields or the submit button.

Could someone tell me what I should be doing to fix this?

Add

background-color: red;

in the .footer style and you will see immediately what 's wrong

Btw, http://quirktools.com/screenfly/ is your friend

Thanks jazzc.

Could you clarify what you mean by this?

in the .footer style and you willsee immediately what 's wrong

Click to expand...

I have made the background red, but I still don't know how I should check for the issue causing this bug. I tried Quirktools, and it looks like on higher resolutions, the text fields seem clickable, but the Submit button still is not working.

Let me show you:

On a "big" screen:



On a small screen (800x600):



See how the footer element blocks the input field as the screen size gets smaller? That 's why it doesn't focus, you think you click on the input field but in reality you 're clicking in the invisible huge footer field that 's blocking it.

Aah..I get it now..I just removed the inordinately huge margin-top and padding-top for the footer class on CSS and see it is fixed now. I have to figure out how to align the footer better now, but this solves the bigger question. thanks a lot..