looks different on mobile devices

hey my form:

 

http://www.supersnapz.com/contact.html

 

looks fine on when viewing it on a computer.  But i've looked at it on my iPhone and iPads and it looks either a lot longer and wider than the original, or else the bottom of the form is cut off (iPad mini and air)

I used iframe to embed it as I build my website using Everweb

Hi,

You need to make your form Responsive. It is possible with JotForm.

Please check the user guide on how to make forms mobile responsive. 

In addition to that, if it doesn't work, please add the code below to your CSS.

/*-----------RESPONSIVE LAYOUT-----------*/

 

.form-line.form-line-column {

width: 100% !important;

margin-left:0

}

.form-line{

width: 100%;    

}

.form-textarea,

.form-textbox,

.form-dropdown{

width: 100% !important;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

.form-label-left, .form-label-right{

width: auto !important;

}

.form-buttons-wrapper{

margin-left:0 !important;

}

.form-input {

width: 100% !important;

}

.form-all{

width: 75% !important;

}

.form-sub-label-container {

width: 100% !important;

display: block  !important;

 

}

Here is how to do this:

1) Click on Setup & Embed.

 

 

2) Click on Designer.

 

3) Click on CSS.

 

4) Copy & paste the code above to CSS.

5) Click on Save button.

If you have any question or issues, please do not hesitate contacting us. We will be glad to assist you.