Heading not displaying on mobile devices

Hi there,

I have a form on two of my website pages that seem to have issues in messing up the placement of the heading, which is a png file. I can seem to adjust the heading somewhat with the CSS values, but it still doesn't seem to work right. Anyway, I did a debugger thing (see attached image) and it showed it as it might be in the jotform javascript and that I need to set a "Height" for it. Can you help me with that? Here are the two pages that have the forms.

http://www.medcohomehealthcareservices.com/employment.html

http://www.medcohomehealthcareservices.com/in-home-consultation.html

 

I have it looking okay on the desktop version (although the Employment header still jumps), but on all mobile platforms, the whole thing moves. Let me know if you have any ideas on the jotform side of things.

 

Thanks!
Lori

lorigarcia@estreet.com

Please be noted that the error message displayed in the screenshot provided is not related to JotForm. I have checked your web pages and noticed that it is the same form embedded on the both web pages.

The form https://form.jotform.com/form/61598423707160 is embedded on http://www.medcohomehealthcareservices.com/employment.html and the form https://form.jotform.com/form/61686570146158 is embedded on http://www.medcohomehealthcareservices.com/in-home-consultation.html

Are you referring to the form https://form.jotform.com/form/61686570146158. This form is not having the header.

I have checked the both pages on a mobile emulator and they are displaying properly at my end.

Please check again and let us know if you are still experiencing the issue and let us know which mobile phone you are using and which form that you are experiencing the issue. We will be happy to assist.

Thank you!

sorry, I have not explained myself correctly. The form itself is working great. It just happens to “move" the website’s "headers/png files" around, the headers are not on the form itself. I guess my question is, is there a way to either change the “height" of the jotform? I see a place to set the “width” of the the form, but I think it is the “height' of the form that is messing up the current page’s header/footer. The error says:
"jotform.forms.js?3.3.14010:240 Debug : setting height to 1380 from iframe”
I am just not sure where to change this in Jotform.
I don’t know if I need to set up an “iframe” in my adobe Muse file or if I need to change the “Height” in the “jotform.forms.js” script. Either way, I am just not sure how to add/change it. Please help if possible.
Thanks!
Lori
...

The height of the form is adjusted dynamically depending on the number of fields to be shown on the form. If you want the height of the form to be fixed, you may embed the form using iframe embed method. 

However, you'll need to use the colored section of the embed code. You can get the iframe embed code of your JotForm by following the guide below:

https://www.jotform.com/help/148-Getting-the-form-iFrame-code

Please give it a try and let us know if you need any further assistance. We will be happy to assist.

I did that and now neither my form or my header. png shows… They both disappeared :( I haven’t published it yet, because my client would go nuts if it is all gone. I can though, really quick if you need to see it.
thanks for your help!
Lori
...

Hello Lori,

It seems that the div which contains your text header is too wide that it covers the two columns. You can set a specific width on the div that contains your text header.  Or you can try removing the 'clearfix' class which causes your div to hide once it's no longer fitting in the screen.

Let us know if this doesn't work or if you have other questions.

Thanks.