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

    How to fix spacing for mobile viewing

    Asked by LuxuryResaleNetwork on June 14, 2016 at 11:09 AM

    I used the code for desktop spacing which worked perfectly, but now the mobile view is messed up and part of the form is hidden. How can I fix this so that the spacing works on both desktop and mobile?

    Thanks

    Mobile viewing how fix
  • Profile Image
    JotForm Support

    Answered by Kevin_G on June 14, 2016 at 01:08 PM

    I found a link that you provided in another where a JotForm is embedded, you asked to make the form mobile responsive. 

    I have checked it and when viewing the form on a mobile device it looks like this: 

    It can be fixed by injecting this code to your form: 

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

        .jotform-form {

            padding: 0;

            padding-top: 4em;

        }

    }

    Here is how the result should look: 

    This guide should help you to inject the code to your form: How-to-Inject-Custom-CSS-Codes

    Hope this helps. 

  • Profile Image

    Answered by LuxuryResaleNetwork on June 14, 2016 at 02:38 PM

    That worked to fix the problem on mobile, but now causes a new problem on desktop where the "first name" field is missing.

     

  • Profile Image
    JotForm Support

    Answered by Kevin_G on June 14, 2016 at 04:21 PM

    I was able to see the same on my end, but it seems like it happens only with a certain screen width, to resolve it, please inject this code besides the code I gave above, both codes should work fine and depending the screen size the form should be displayed properly: 

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

        .jotform-form {

            padding-top: 60px !important;

        }

    }

    Please inject the code and if this still does not help, let us know, also, please once you have injected the code and if this does not work, do not remove the code, we will need to check why the code is not working and with the code there would be helpful to know it. 

    We look forward to your response. 

  • Profile Image

    Answered by LuxuryResaleNetwork on June 15, 2016 at 11:10 AM

    This worked, thank you for your help!