Form is cut off on mobile devices

I always seem to have to go and rearrange the layout of my forms...because every time I go back to my site on my device, the layout has changed and the submit button is no longer visible. Can someone please help me understand what I am doing wrong, or why this keeps happening?

My website is http://http://www.empiredevelopmentgroup.net/underthehood

it is an event page, and customers keep contacting us about the forms looking weird and the submit button is missing on their phone/device. But it looks normal on computers. The mobile responsive widget is on all forms. 

Thank you in advance,

Ralph Perez

I went into the event page of your site, but I could not find any jotform:

Please share the exact URL to inspect this further.

www.empiredevelopmentgroup.net/underthehood

Click on the Register, Sponsor, Vendor, and Ticket Button below the Banner

After checking your website I saw a problem you are mentioning. You can try embedding your form again on your website using this code:

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://secure.jotformpro.com/form/50906195287968" frameborder="0" style="width: 100%; height: 5234px; border: none;" scrolling="yes"></iframe>

I've increased the height value to show the submit button on responsive version of your form.

Hope this will help. Let us know if you need further assistance. 

I am a little confused because wouldn't increasing the height of the iframe make the form extremely long on the actual website?

This screenshot is what it currently looks like on my Samsung Galaxy S5 using google Chrome. is seems like of a width issue, as well as, a height issue. Every time I go into the Designer platform and make any little change, then save, it once again looks normal on my phone...but then 20-30 mins later it goes back to the Screenshot view.

The link to this specific page is www.empiredevelopmentgroup.net/the-donation-page

You can change width and height by Injecting Custom CSS. To do that inside of your Form Builder select Setup & Embed tab, then click on Preferences, then select Form Styles tab and inside of Inject Custom CSS field at the bottom of existing code paste this code:

@media screen and (max-width: 480px)

.form-label {

  padding-top: 20px;

}

#input_4_donation {

width : 100px!important;

}

After adding this code your form should look like this.

Hope this will help. Let us know if you need further assistance.

Awesome! Thank you so much BJoanna 

My only question now is where can I find the #input for all of my forms, so that I can add this code to each form?

Thank You,

Ralph 

The issue keeps reoccurring...I inserted the Css code and it looked great, but 2 mins later it went back to the screenshot view that I sent you.

I checked your form on the website  using a mobile browser. But I could not reproduced the issue.

The form is not cut-off and it stays that way even after leaving it as is.

 but 2 mins later it went back to the screenshot view that I sent you.

Please described to us how you 'went back to it later' you mean.. are you saying when you re-open the form again on the device browser the next time.. it is again cut-off?

The only possible reason it will change behavior is if the form was changed also and then test view again on the browser.

Let us know if the issue persist.

Thanks.