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

    Why some fields are not being displayed inline when viewing the form in mobile devices?

    Asked by BBC2016 on May 02, 2016 at 01:33 AM

     

    I have an issue/question about differences in desktop vs mobile:

    In mobile SOME fields show on the same line and others get broken up into 2 lines? - why?

    Organization/company is on ONE line but PHONE and EMAIL fields are NOT. They NEED to be on the same line . AND the bottom of the form where it says REASON FOR JOINING BBC and BILLING INFO SECTION is all messed up too! It looks like they are OVERLAPPING. HELP ASAP!!!!!

    I put an IFRAME in the wordpress.

    Page URL:
    http://buildingbridgescoalition.org/registration-form/

    Mobile in viewing div section same line
  • Profile Image

    Answered by BBC2016 on May 02, 2016 at 01:34 AM

    I MADE A SCREEN SHOT FOR YOU TO SEE IT:

     

     

  • Profile Image
    JotForm Support

    Answered by Kevin_G on May 02, 2016 at 01:47 AM

    You need to inject this CSS code to fix it: 

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

        li#id_5{

            margin-left: 18px;

        }

    }

    This is because the margin between the fields needs to be less on mobile devices as the screen is not the same width like a desktop or tablet device. 

    Follow the steps on the guide linked below to inject the code to your form: 

    How-to-Inject-Custom-CSS-Codes

    Hope this helps. 

  • Profile Image

    Answered by BBC2016 on May 02, 2016 at 01:57 AM

     i put code in but no DIFFERENCE - can u look on ur end too????

  • Profile Image

    Answered by BBC2016 on May 02, 2016 at 02:01 AM

    i added ur code below to all my other forms too - but same problem - form fields are not staying on the same line some of them.

     

     

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

     

        li#id_5{

     

            margin-left: 18px;

     

        }

     

    }

     

     

     

  • Profile Image
    JotForm Support

    Answered by beril on May 02, 2016 at 03:04 AM

    You can solve that issue by adding the CSS code.

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

       #input_11 {

            margin-top : -5px !important;

        }

    }

    We would appreciate it if you could test it with your mobile phone. It will show you the correct view. The mobile emulator doesn't work properly.

  • Profile Image

    Answered by BBC2016 on May 02, 2016 at 10:44 PM

    stillnotworking.....plshelp!

     

    I have an issue/question about differences in desktop vs mobile:

    In mobile SOME fields show on the same line and others get broken up into 2 lines? - why?

    Organization/company is on ONE line but PHONE and EMAIL fields are NOT. They NEED to be on the same line . AND the bottom of the form where it says REASON FOR JOINING BBC and BILLING INFO SECTION is all messed up too! It looks like they are OVERLAPPING. HELP ASAP!!!!!

  • Profile Image
    JotForm Support

    Answered by Kiran on May 03, 2016 at 12:05 AM

    I've checked your JotForm and see that there are some issues with the CSS code injected to your JotForm. 

     

    Please make the following changes to the existing CSS code on the form.

    Make sure that the changes applied to the CSS code is saved successfully to the form.

    Also, enable Form columns from the Form Designer as shown in the image below:

    Let us know how it goes. We will be happy to take a look again.