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 is only some of my form mobile responsive?

    Asked by EnergyExpress on November 04, 2016 at 12:42 PM

    My form works and is responsive except one section on a mobile phone device.  I have included the mobile responsive widget and checked responsive in designer.  However, in one section an image is enlarged from original size and the submit button is showing center instead of left justified.  Also, if I shrink fields the form is distorted.  There is a much larger image at the top of the form and it is responsive.

    I viewed the form in Designer and on my mobile phone with the same results.

    Below shows what it should look like and following image shows the distorted view on a mobile phone. 

     

     

     

    What am I missing?

    https://secure.jotformpro.com/form/50745129319962

     

    Thank you,

     

    Mobile mobile responsive JotForm size uploads height
  • Profile Image
    JotForm Support

    Answered by Jan on November 04, 2016 at 04:37 PM

    Please try injecting this custom CSS:

    @media only screen and (max-width: 40em) {
       #cid_51.form-image {
           width : 74px !important;
           height : auto;
       }

        li#id_51 {
           width : 100px !important;
       }

        li#id_51 {
           margin-left : 0px !important;
       }

        li#id_48 {
           width : 400px !important;
           margin-left : 0px !important;
       }
    }

    @media only screen and (min-width: 320px) and (max-width: 480px) {
       li#id_48 {
           width : 200px !important;
           margin-left : 0px !important;
       }
    }

    Here's a guide on How-to-Inject-Custom-CSS-Codes. Here's the result:

    Hope that helps. Thank you.