How to fix spacing for mobile viewing

  • Profile Image
    LuxuryResaleNetwork
    Asked 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

  • Profile Image
    Kevin_G
    Answered 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
    LuxuryResaleNetwork
    Answered 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
    Kevin_G
    Answered 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
    LuxuryResaleNetwork
    Answered on June 15, 2016 at 11:10 AM

    This worked, thank you for your help!