Top of form cut off on iPhone.

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!!!

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.

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!

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!