How to fix spacing for mobile viewing

  • 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

  • Kevin Support Team Lead
    Replied on June 14, 2016 at 1: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: 

    How to fix spacing for mobile viewing Image 1 Screenshot 30

    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: 

    How to fix spacing for mobile viewing Image 2 Screenshot 41

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

    Hope this helps. 

  • LuxuryResaleNetwork
    Replied on June 14, 2016 at 2: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.

     

    How to fix spacing for mobile viewing Image 1 Screenshot 20

  • Kevin Support Team Lead
    Replied on June 14, 2016 at 4: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;

        }

    }

    How to fix spacing for mobile viewing Image 1 Screenshot 20

    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. 

  • LuxuryResaleNetwork
    Replied on June 15, 2016 at 11:10 AM

    This worked, thank you for your help!