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

    Remove ALL Responsiveness

    Asked by gerttcm on May 23, 2016 at 08:26 AM

    Hello there,

     

    How do I remove ALL responsiveness from my form? 

     

    I would basically like to have my form stay the same size regardless of where it's being opened....but currently if I reduce the width of a browser or open it up on a mobile it automatically stretched to the size of the browser or screen, even though mobile responsiveness has been disabled? 

     

    So how do I keep my form the same size regardless of the size of screen it is being opened on? 

     

    Thanks, 

     

    WHAT IS SHOULD ALWAYS LOOK LIKE:

     

    WHAT IT ENDS UP LOOKING LIKE:

    Page URL:
    61402716397558

    all responsiveness JotForm size uploads height
  • Profile Image
    JotForm Support

    Answered by Charlie on May 23, 2016 at 10:34 AM

    I see you have a lot of custom CSS code in your form where the width and other styling is set, that's where the problem is starting. If the width is too wide, then the field is push at the bottom to make it more responsive. By default, the forms are using a mobile responsive layout for better viewing experience for the users. Please allow me sometime to check your CSS code and see if I can adjustments.

  • Profile Image
    JotForm Support

    Answered by Charlie on May 23, 2016 at 10:43 AM

    See if this form works for you: https://form.jotform.com/61434442983964. To have a copy of it in your account, you can clone it by following this guide: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

    Changes I made:

    1. I wrapped all the custom CSS code with this:

    @media screen and (min-width: 10px){

    ...All CSS code here

    }

     

    2. After that I set a maximum width of 300px so that it won't adjust:

     

    3. I added these codes inside the custom CSS code you have:

     #customFieldFrame_40 {

            width : 100% !important;

        }

        .form-line {

            padding : 0 !important;

        }

     

    First one is for adjusting the first widget's width in relation with the form's width. The second is to remove the padding when the form is being viewed on a smaller display.

     

    Let us know if that works.

  • Profile Image

    Answered by gerttcm on May 24, 2016 at 01:53 AM

    Hey Charlie, thanks for the quick reply!

     

    It's ALMOST perfect! 

     

    It still wraps when changing the size of browser or opening on mobile as per this example :

    Is there a way to remove this last bit of auto-wrapping as well?

  • Profile Image
    JotForm Support

    Answered by Charlie on May 24, 2016 at 03:36 AM

    Usually the sizes of the mobile devices now are at a minimum of 320px. I am not sure if we can have lower than 300px to make it less responsive. The input boxes surely have a min-width. Your CSS code has specific min-width on some of the drop down boxes and text boxes. Which is why the others started to wrap.

    If you want, we can just set a horizontal scroll when the width of the viewing device is less than 300px? You can view my form again: https://form.jotform.com/61434442983964. You can see that it doesn't wrap up, but a horizontal bar will be displayed.

    Let me see if I can come up with a more suitable solution.

  • Profile Image

    Answered by gerttcm on May 24, 2016 at 04:49 AM

    Thanks Charlie, but it still wraps up when opened up on a mobile as per above....iPhone 5. is what I'm testing on.

  • Profile Image
    JotForm Support

    Answered by Charlie on May 24, 2016 at 04:50 AM

    I made a lot of changes. Could you check this cloned form: https://form.jotform.com/61441769036963.

    See if that works on all mobile devices.

    This is how it looks like in my end:

    iPhone 3GS

     

    iPhone 6S

     

    Let us know if that works for you.

  • Profile Image
    JotForm Support

    Answered by Charlie on May 24, 2016 at 04:52 AM

    Thanks for the update. I see you made a reply while I was posting mine. Could you check the latest cloned form that I have. See if that works in your iPhone 5 test device.

  • Profile Image

    Answered by gerttcm on May 24, 2016 at 08:02 AM

    Your a genius. Thanks Charlie! 

     

  • Profile Image
    JotForm Support

    Answered by Charlie on May 24, 2016 at 09:26 AM

    I'm not a genius but thank you for the kind words :)

    Should you need our assistance again, please do feel free to open a new thread here in the forum.

    Thank you.