Forms embedded on a website not showing properly on mobile devices

I am having some issues. I have tried:

1. Using the Mobile Responsive Widget

2. Setting the Form to be Responsive in the Preferences.

3. Extending the height of the form through HTML.

4. I read that changing the width could possibly mess up the form with mobile viewing, so I left it the same, but then it views wrong on the web browser on the computer. (So, I currently have the width lowered for better desktop viewing.)

I am currently Artisteer, and the form is being imported into the HTML page coding using the iFrame.

Picture one:

Source: http://ecolivingpest.com/free-quote.html

Issue: On mobile viewing, the form cuts off.

Picture two:

Source: http://ecolivingpest.com/contact-us.html

Issue: On mobile viewing, the form cuts off AND it doesn't sit right, hiding the text that was meant to go below the form.

Picture three:

Source: http://ecolivingpest.com/home.html

Issue: On mobile viewing, the form cuts off.

If there's a way to get these forms looking correct both on the desktop and via mobile, it would be great!

I would like to apologize for the inconvenience. I have checked your form on a mobile device and got the same result as you have. It seems that the container, <div>, where the forms are placed are not properly sized according to the size of the form. I've noticed this when I checked each of your forms separately through their link also on a mobile device. The forms look perfect when not embedded on a website. I understand that you embed your forms using the iframe and iframe tags specify an inline frame, meaning, it does not start on a new line and only takes up as much width as necessary, depending on where it resides. 

I have inspected your website and found this on each page. Reason why your form overlaps with the other content of your website.

You can change the value of position to "initial" like this: 

.responsive .art-responsive-embed iframe, .responsive .art-responsive-embed object, .responsive .art-responsive-embed embed {

   position: initial;

   top: 0;

   left: 0;

   width: 100%;

   height: 100%;

}

Or, you can add this instead,

iframe#JotFormIFrame {

   position: initial !important;

}

Another thing that I have found is this: 

If you could change the height base on the form's height, that might fix the issue of your forms being cut off. I am seeing that on every page and your forms have different heights, you can create different id's depending on what form that is embedded, so you can have it changed differently. 

Also, I'm seeing that you have changed the height to 75% for the forms on http://ecolivingpest.com/free-quote.html and http://ecolivingpest.com/contact-us.html

Try updating those that have mentioned above and check the results.

Kindly give us an update and let us know if you need any further assistance. Thank you.

Thank you for your help. I played around with the pages for a bit, doing your suggestions, and it worked! The only other issue, in the form, on the http://ecolivingpest.com/free-quote.html page, there's only a few words that are cut off within the form. I'll shortening the wording where it cuts off and fixing it that way, because everything else works perfect. Thank you again for helping me with this.

On behalf of Mike - -You're welcome. 

Let us know if you need additional assistance - happy to help.