What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Input fields are off the screen on mobile in portrait orientation

    Asked by JHobbs1958 on October 30, 2016 at 06:05 PM

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

    Page URL:
    http://mojoflorida.com/sh-october/splash-responsive.html

    Screenshot
    Mobile input fields on mobile CSS custom CSS portrait
  • Profile Image
    JotForm Support

    Answered by owen 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

    Answered by JHobbs1958 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
    JotForm Support

    Answered by Mike_G 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.