1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Form elements not responding on smaller screen computer

Discussion in 'HTML & JavaScript' started by PopUnder, Jan 8, 2013.

  1. PopUnder

    PopUnder Newbie

    Joined:
    Dec 19, 2012
    Messages:
    35
    Likes Received:
    5
    Home Page:
    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?
     
  2. jazzc

    jazzc Moderator Staff Member Moderator Jr. VIP

    Joined:
    Jan 27, 2009
    Messages:
    2,468
    Likes Received:
    10,148
  3. PopUnder

    PopUnder Newbie

    Joined:
    Dec 19, 2012
    Messages:
    35
    Likes Received:
    5
    Home Page:
    Thanks jazzc.

    Could you clarify what you mean by this?

    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.
     
  4. jazzc

    jazzc Moderator Staff Member Moderator Jr. VIP

    Joined:
    Jan 27, 2009
    Messages:
    2,468
    Likes Received:
    10,148
    Let me show you:

    On a "big" screen:

    RpU4s.png

    On a small screen (800x600):

    Xy9VL.png

    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.
     
    • Thanks Thanks x 1
  5. PopUnder

    PopUnder Newbie

    Joined:
    Dec 19, 2012
    Messages:
    35
    Likes Received:
    5
    Home Page:
    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..
     
    • Thanks Thanks x 1