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 change form formatting only for mobile devices?

    Asked by MaidCrew on April 25, 2017 at 08:39 PM

    Hello... I've gotten myself all confused and turned around in trying to figure out what settings my form should have in order to accomplish the following:

    I have two drop downs. When on a desktop I want the drop downs to be side by side in two columns but on a mobile I would like them to be in a single column. 

    Can y'all help me with this.  I've got the field set to "shrink", I've got CSS on both dropdown fields, I've got a mobile responsive widget, I've got make form responsive checked off and Enable Form Columns selected.

    I'm sure it's a simple thing but I've tried all sorts of varied configurations and CSS in order to get the desired outcome but I'm clueless now.

    Thanks in advance for the help.

    Page URL:
    https://form.jotform.us/71147211693150

  • Profile Image
    JotForm Support

    Answered by candy on April 26, 2017 at 02:45 AM

    Hello,

    I've cloned your form named "Clone of LandingPgQuote" on my side in order to test it on mobile. As far as I check on iPhone 6, the drop down lists look side by side as you can see the screenshot below:

    In order to make them appear on the same line on mobile devices, you need to inject CSS media queries to the form. I have injected the following CSS codes to the form in order to make the drop-down lists appear on single lines as you can see in the following screenshot below:

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

        .form-col-1 {

            background-color: lightgreen;

          width: 100% !important;

        }

      .form-col-2{

            width: 100% !important;

      }

    }

    Please try this and if you need further assistance, let us know. We will glad to be helpful.

    Thanks.

  • Profile Image

    Answered by   on April 26, 2017 at 07:16 AM

    Hello... I injected the CSS code you provided. I think you misunderstood my request.

    View On Desktop should be 2 columns.

    View on Mobile should be 1 column.

    After injecting the code you provided, I still get 2 columns on mobile.... only wanting 1 column on mobile.

    Thanks

  • Profile Image
    JotForm Support

    Answered by Mike_G on April 26, 2017 at 08:25 AM

    Thank you for clarifying your concern, we appreciate it.

    Please add the following CSS codes instead and test your form again both in mobile and desktop view.

    @media (max-width: 480px) {

        #id_4, #id_237 {

            width: 100% !important;

        }

    }

    I hope this will help you with what you're trying to achieve, If, in any case, you have other questions regarding this, please do not hesitate to let us know.

    Thank you.