Top of form cut off on iPhone.

  • Profile Image
    accordingtomatt
    Asked on December 28, 2015 at 03:48 PM

    Hello there!

     

    I've got a JotForm on this page:

    http://boysandbunting.blogspot.de/p/contact.html

    It works fine in the browser, but when I go on my iPhone, the words: Your Name are cut off, you only see the bottom of the text. I've tried playing with margins and stuff, but I can't get the text to show up on my phone. 

    Any ideas what it could be? 

    Thanks in advance!!!

  • Profile Image
    david
    Answered on December 28, 2015 at 06:21 PM

    Hi,

    There are a couple things you can try.  First, you can try adding the mobile responsive widget

    http://widgets.jotform.com/widget/mobile_responsive

    Or enabling mobile responsiveness for your form:

    http://www.jotform.com/help/311-How-to-make-forms-Mobile-Responsive

    If neither of those allow for the form to show properly, you can try adding this code to your form:

    http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    @media only screen

    and (min-device-width : 320px)

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

    .form-all {

    margin-top: 25px !important;

    }

    }

    If that still does not work, let us know and we will be happy to have another look.

  • Profile Image
    accordingtomatt
    Answered on December 28, 2015 at 06:26 PM

    Hi there!

     

    Just tried adding the code since I don't want to make the form mobile responsive. 

    It didn't change anything though. The form still looks the same on my mobile phone. 

    We've tried on an iPhone 5s and an iPhone 6. 

     

    Thanks in advance!

  • Profile Image
    EltonCris
    Answered on December 29, 2015 at 12:12 AM

    My colleague's CSS code seems working fine when I tried it on iPhone Simulator. Perhaps it was overpowered by another code. Anyway, you can also try the following, this might fix it. I believe it's a problem with the form container (where the form is embedded) rather than the form itself. Please try to inject this and see if this fixed the problem.

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

    .jotform-form {

        padding: 40px 0 !important;

    }

    }

    Make sure to paste this code at the most bottom part of the existing CSS codes in your form.

    So far, the result looks good on iPhone simulator.

    We'll await your reply. Thanks!