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

    Make a two column form mobile responsive

    Asked by JKulp42757 on April 21, 2015 at 11:51 PM

    My form looks great on desktop. However on mobile it's a jumbled mess.

    The Custom CSS code I'm using is below and attached is what the desktop and mobile views look like.

    *****************************************

    #id_7 {

        position : relative;

        top : -30px !important;

    }

     

    .form-line.form-line-column.form-col-1.form-line-column-clear {

        top : -240px;

    }

     

    @media only screen 

     

    and (min-device-width : 320px) 

     

    and (max-device-width : 480px) {

     

    .form-textbox, .form-textarea {

     

    width: 250px;

     

    }

     

    }

     

    @media only screen 

     

    and (min-device-width : 768px) 

     

    and (max-device-width : 1024px) {

     

    .form-textbox, .form-textarea {

     

    width: 250px;

     

    }

     

    }

    *****************************************

    Screenshot
    mobile form problem Mobile textarea textbox css code
  • Profile Image
    JotForm Support

    Answered by Charlie on April 22, 2015 at 05:10 AM

    Hi,

    I've cloned  your form and made some changes in the custom CSS code. Here's mine:

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

        #id_7 {

            position : relative;

            top : -30px !important;

        }

        .form-line.form-line-column.form-col-1.form-line-column-clear {

            top : -240px;

        }

     

    }

    @media screen and (min-width: 200px) and (max-width: 570px){

        #input_6_donation {

            width : 80% !important;

        }

    }

    Here's the direct link of my form: http://form.jotformpro.com/form/51112300000929?. You can clone it and see if it works for you. Here's a guide on how to clone my form: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL.

    Do let us know if that works.

    Kind regards.

  • Profile Image

    Answered by JKulp42757 on April 22, 2015 at 12:26 PM

    Thanks for the reply.

    I tried the code, and I also cloned your form.

    It looks correct via mobile, EXCEPT when you get to the bottom where the submit button should be, it's cut off (like the form box had a set length that was met and so everything below that point is cut off)...I'm not sure why this is....

     

  • Profile Image
    JotForm Support

    Answered by Charlie on April 22, 2015 at 01:44 PM

    Hi,

    I assume that your form is embedded on a website? Could you share us the link of it so that we can better check, also, you could try embedding the form using the iFrame code and make sure that the height value in the iFrame covers all the fields in the form. Here's a guide on it: http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code.

    We'll wait for your response.

     

  • Profile Image

    Answered by JKulp42757 on April 22, 2015 at 03:05 PM

    okay, using the iframe code and changing the height fixed it - thanks!!

  • Profile Image
    JotForm Support

    Answered by Charlie on April 22, 2015 at 03:10 PM

    You're welcome. I'm glad it worked.

    If you needed any assistance again, feel free to open a new thread here in the forum.

    Kind regards.