Input fields are off the screen on mobile in portrait orientation

  • Profile Image
    JHobbs1958
    Asked on October 30, 2016 at 06:05 PM

    The first two input fields are not visible on the screen when using form on mobile.

  • Profile Image
    owen
    Answered on October 31, 2016 at 01:43 AM

    Hi,

    I have cloned your form and reproduced the issue. Width of the first two fields are far too much to fit in a mobile screen and they slide far right because of that. 

    In the cloned version of your form I added our Mobile Responsive widget. Please see how it looks like on mobile after that:

    Text boxes are now aligned to their respective headlines and their width are now fit to the mobile screen. Please try this widget:

    Do let us know if the issue still persists. Thank you for contacting us. 

     

  • Profile Image
    JHobbs1958
    Answered on November 05, 2016 at 10:03 PM

    I created a new page at segregationholding.con/guru-index-new.html and added the widget. It didn't fix the problem. I inserted some CSS that also did not help: 

    @media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: portrait) {

    li#input_5 {width: 100px !important;} li#input_4 {width: 100px !important;}

    form-all { width: 100%; color: black; background-color: #d2232a;

    }

    }

  • Profile Image
    Mike_G
    Answered on November 06, 2016 at 11:42 AM

    Can you try to add the CSS codes below to your form and check the result, please?

    @media (min-width : 304px) and (max-width: 717px){

        #label_5, #label_6, #label_4 {

            width : 23% !important;

        }

        #id_6 {

            width : 100%;

        }

        #cid_5, #cid_6, #cid_4 {

            width : 75% !important;

        }

        .form-all .form-submit-button {

            height : initial !important;

        }

    }

    You might need to remove the Mobile Responsive widget to avoid conflict. 

    Or, you can also try to add the codes above to the codes on your website instead within <style></style>.

    Thank you.