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

    Form on Responsive on Mobile

    Asked by fillintheblanksjewelry on February 28, 2017 at 02:35 AM
    The form is displaying well on desktop. In mobile phones, the form shows fine when the screen is rotated. But it did not show properly on portrait screen. I tried following the instructions as what described here https://support.jotform.com/help/322-How-to-make-mobile-friendly-forms-on-JotForm. It did not seem to work. The logo was still truncated. The 2 columns of the product list display became 1 column. The configurable list was also truncated.
    Is it possible to make the form display properly on mobile the same way as it is shown on desktop?
  • Profile Image
    JotForm Support

    Answered by Nik_C on February 28, 2017 at 06:02 AM

    Hello,

    I added the below CSS code to your form:

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

        span.form-product-item {

        width: 350px!important;

    }

    img.header-logo-left {

        width: 275px!important;

    }

    }

    Also, I added a mobile responsive widget to your form.

    Please check and let us know if you need further adjustments so we can assist you.

    Thank you!

  • Profile Image

    Answered by DOAHL on February 28, 2017 at 05:25 PM

    Hello,

    the mobile responsive widget doesn't seem to be available when I search the widgets in the Form Elements. How do I install it?
  • Profile Image
    JotForm Support

    Answered by jonathan on February 28, 2017 at 10:14 PM

    @DOAHL

    We will resolve your concern here https://www.jotform.com/answers/1078713

    Thanks.

  • Profile Image

    Answered by fillintheblanksjewelry on March 09, 2017 at 08:45 AM
    Hi
    Thank you, the logo is displaying properly now.
    However, the product list was still showing in 1 column and the "Let's
    customize" configuration list field was still truncated.
    When I rotate the mobile to landscape screen, similar display happened.
    This was not happening before. The landscape screen was displaying
    properly.
    Please help.
    Thanks in advance!
    ...
  • Profile Image

    Answered by fillintheblanksjewelry on March 09, 2017 at 08:46 AM
    Hi
    Thank you, the logo is displaying properly now.
    However, the product list was still showing in 1 column and the "Let's
    customize" configuration list field was still truncated.
    When I rotate the mobile to landscape screen, similar display happened.
    This was not happening before. The landscape screen was displaying
    properly.
    Please help.
    Thanks in advance!
    ...
  • Profile Image

    Answered by fillintheblanksjewelry on March 09, 2017 at 09:16 AM
    Hi guys,
    Any updates? Is it possible to show 2 columns of products and configuration list on mobile?
    Thanks.
    ...
  • Profile Image
    JotForm Support

    Answered by Nik_C on March 09, 2017 at 10:37 AM

    Hello,

    Sorry for the late response.

    I'm not sure how that would look like on a phone, because of the images, it might happen that the products will be a bit off the screen on a phone. 

    I'll check if it is possible to align in that way. Will get back to you.

    Thank you!

  • Profile Image
    JotForm Support

    Answered by Nik_C on March 11, 2017 at 07:19 PM
    Thank you very much for your patience.
    Please try to copy and paste the below CSS code in your Custom CSS Field:
     
    @media only screen 
    and (min-device-width : 375px) 
    and (max-device-width : 667px) 
    and (orientation : portrait){ 
      
      img.form-product-image-with-options{
      width:60px!important;
        height:60px!important;
      }
      #cid_77{
        width:371px;
      }
     
      span.form-product-item{
      width:159px!important;
      height:95px!important;
      }
     
      #products{
      width:420px;
      }
    }
     
    I tested and this is how it shows (on iPhone):
     
    Here is my clone of your form: https://form.jotformpro.com/70694013559965
     
    Hope that is what you had in mind.
     
    Let us know how it worked.
     
    Thank you!