Form not responsive in iPhone device

  • Profile Image
    eventzhire
    Asked on August 27, 2016 at 10:50 AM

    Hi - I'm trying to achieve the same result.

     

    However your form does not show correctly on an actual iphone ( all the emulators suggest otherwise )

    It works fine on andriod ( google chrome ) but not on Iphone ( safari & chrome)

     

    Any ideas?

  • Profile Image
    Jan
    Answered on August 27, 2016 at 11:16 AM

    I opened your form and I can see that the Mobile Responsive widget is inserted. The option to make the form mobile responsive in the Form Designer is enabled as well.

    I apologize because I don't have an iPhone to test the issue. I used an emulator to check if your form is responsive or not. Upon checking, I can see that the fields adjust automatically depending on the screen. Here's a screenshot:

    May I ask if this form is embedded on a webpage? If it is, can you please re-embed the form using the iFrame method. Here's a guide: Getting-the-form-iFrame-code. May I also ask what type of iPhone device you have and also the OS version.

    Thank you.

     

  • Profile Image
    eventzhire
    Answered on August 27, 2016 at 11:31 AM

    Thanks for your assistance.

    The following screen shot is from android - as you can see the time elements are lining up

     

    having checked on my iPhone 6 latest iOS both in chrome and safari then the following occurs.The same error occurs on my colleagues iPhone 6 

     

    The form works perfectly on an emulator but not on the phone itself.

  • Profile Image
    Jan
    Answered on August 27, 2016 at 03:48 PM

    Please try using this link to access the form in your iPhone: https://www.jotformeu.com/form/62143463737356

    Let us know if it is still the same. Thank you.

  • Profile Image
    eventzhire
    Answered on August 27, 2016 at 03:55 PM

    Still the same as above :-(

     

  • Profile Image
    Mike_G
    Answered on August 27, 2016 at 05:40 PM

    I will try to work on a solution for your concern and get back to you as soon as I have found any. 

    Thank you.

  • Profile Image
    Mike_G
    Answered on August 27, 2016 at 06:22 PM

    Please try to add the codes below to your form.

    @media only screen and (max-width: 40em){

    #id_50 span:nth-child(4), #id_7 span:nth-child(4), #id_9 span:nth-child(4), #id_8 span:nth-child(4), #id_12 span:nth-child(4), #id_13 span:nth-child(4), #id_16 span:nth-child(4){

    clear: left !important;

    }

    }

    The instructions on how you can inject custom CSS codes to your form is found in this guide: How-to-Inject-Custom-CSS-Codes

    I hope this helps. If you need any further assistance, please feel free to contact us anytime.

    Thank you.

  • Profile Image
    eventzhire
    Answered on August 28, 2016 at 03:21 AM

    Amazing - thank you soo much.

    Yes - i can confirm that the above code works for me.

    Much appreciated.