Form on Responsive on Mobile

  • fillintheblanksjewelry
    Asked on February 28, 2017 at 2: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?
  • Nik_C
    Replied on February 28, 2017 at 6: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;

    }

    }

    Form on Responsive on Mobile Image 1 Screenshot 20

    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!

  • DOAHL
    Replied on February 28, 2017 at 5: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?
  • jonathan
    Replied on February 28, 2017 at 10:14 PM

    @DOAHL

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

    Thanks.

  • fillintheblanksjewelry
    Replied on March 9, 2017 at 8: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!
    ...
  • fillintheblanksjewelry
    Replied on March 9, 2017 at 8: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!
    ...
  • fillintheblanksjewelry
    Replied on March 9, 2017 at 9:16 AM
    Hi guys,
    Any updates? Is it possible to show 2 columns of products and configuration list on mobile?
    Thanks.
    ...
  • Nik_C
    Replied on March 9, 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!

  • Nik_C
    Replied on March 11, 2017 at 7: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):
    Form on Responsive on Mobile Image 1 Screenshot 20
     
    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!