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 make Kloudless File Uploader work on mobile

    Asked by antdevine on March 28, 2017 at 09:03 AM

    When I view the file uploader on mobile the boxes are still on 2 lines and go over the top of each other.  I tried adding in the css to fix this but it just ignores it, is there an option to switch mobile on for this?:

    @media screen and (max-width: 767px) {

        .custom-field-frame, .direct-embed-widgets, .signature-pad-wrapper {

            width: 100% !important;

            height: 2900px !important;



        .small-block-grid-2>li {

        width: 100%;

        list-style: none;




    The site I am working on is: http://dev-sage-developer-roles.pantheonsite.io/  and the form I am using is called Sage

    Page URL:

  • Profile Image

    Answered by Ian on March 28, 2017 at 12:03 PM

    I am not sure, if I understand the issue correctly. This is how the layout appears on mobile for me

    Could you please specify what am I missing understanding the issue?

  • Profile Image

    Answered by antdevine on March 28, 2017 at 12:10 PM

    its when you click the upload files button, the blocks inside that all sit on top of each other and i want to remove the scroll bar so the iframe is full height.

  • Profile Image
    JotForm Support

    Answered by BJoanna on March 28, 2017 at 03:27 PM

    Is this your issue?

    This issue is related to width of you upload field. To resolve it you can increase the width of your form fields on mobile devices. For example you can reduce padding. 

    You can add this CSS code to your form:

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

    .form-section {

        padding : 5px;



    How to Inject Custom CSS Codes

    Hope this will help. Let us know if you need further assistance. 

  • Profile Image

    Answered by vinodc on March 29, 2017 at 03:41 AM

    There is also an open issue on GitHub regarding the File Explorer on iOS: https://github.com/Kloudless/file-explorer/issues/56

  • Profile Image

    Answered by antdevine on March 30, 2017 at 12:21 PM

    I have tried injecting the css and it doesn't overwrite the mobile layout.

  • Profile Image
    JotForm Support

    Answered by Welvin on March 30, 2017 at 02:03 PM

    I also tried injecting a custom CSS codes to adjust the sizes of the images, it doesn't seem to work. I think this is because the widget is loaded in an iframe. vinodc is the developer of this widget, I'm sure they are aware of it now.