Next and Back buttons not showing on mobile browsers

I've injected CSS into the form to get the look I want, but I'm noticing that my page break CSS must be messing up when trying to display on mobile platforms. Can you help? I can't see the buttons at all on iPhone and only see a portion of it on Android.

Our forms are mobile friendly. We do recommend to use the iFrame version of the form

We also do recommend to add this code in your HTML page, before the </head> tag.

<style>
iframe, iframe#JotFormIFrame { height:500px !important; }
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

But if you are using the direct link then add this code in your form styles (use this guide)

/* Smartphones (portrait and landscape) ----------- */
@media only screen

and (max-device-width: 320px)

and (max-device-width : 100%) {

iframe, .form-all {

width: 100%!important;

height:500px !important; } }

In general, this code should fix the problem, but you can adjust the height accordingly until you get the desired effect.

I tried using the code that you indicated for the direct link and nothing changed. I don't have access to the </head> tag so I can't use that. Any other suggestions?

@ hlaclair

Hi,

Are you still referring to this form http://www.jotformpro.com/form/41053533085953 ?

I checked the form's injected CSS code, but I could not see the suggested code by Jeanette in your form. This was the only CSS code I see on the form http://pastie.org/9303411

Please make the adjustment and add the suggested CSS code. Then check again if it makes the difference.

Please inform us if you need more assistance.

Thanks!

@ hlaclair

You migh also want to use the Mobile Responsive widget on your form. As it makes it easier to make the form responsive when viewed in mobile browsers.

Thanks.