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

    Is it possible to narrow the Gratuity and Total fields below for mobile devices? Thanks

    Asked by JBL on February 06, 2017 at 07:39 PM

    Not related, but is it possible to narrow the Gratuity and Total fields below for mobile devices?

     

    Thanks

  • Profile Image
    JotForm Support

    Answered by Kevin_G on February 06, 2017 at 10:37 PM

    You may try injecting this CSS code: @media screen and (max-width: 480px){

    input#input_42 {

        min-width: 20% !important;

        max-width: 100% !important;

        width: 20% !important;

    }

     

    #input_26_donation{

        min-width: 20% !important;

        max-width: 100% !important;

        width: 20% !important;   

    }

     

    To inject the code in the new v4 builder, click on the designer icon on the right side of the form builder: 

    Go to the CSS tab and paste the code there: 

    Hope this helps. 

  • Profile Image

    Answered by JBL on February 07, 2017 at 12:35 AM

    Hi Kevin,

    I tried injecting the code but it does not work

    I had another open ticket which was also just resolved so I injected both sets of code (which is why it shows from line 22). I tried them together, and then separately (in case they conflict). Either way they both don't work.

  • Profile Image
    JotForm Support

    Answered by Rose on February 07, 2017 at 03:05 AM

    I cloned your form to test on my side. I can say that, the css code provided by my colleague does not works for only Ipad but works for other mobile devices as you can see here below.

    To make it narrow also at Ipad, please inject following css code. 

    @media only screen and (max-device-width: 768px){ /*tablet*/

    input#input_42 {

            min-width : 20% !important;

            max-width : 100% !important;

            width : 20% !important;

        }

     

        #input_26_donation {

            min-width : 20% !important;

            max-width : 100% !important;

            width : 20% !important;

        }

    }

     

    After that, your form will seen at Ipad, as following.

     

     

    If you have more questions, please feel free to contact us. We would be pleased to assist you. 

  • Profile Image

    Answered by JBL on February 07, 2017 at 04:00 PM

    This works fine now. Thank you.