-
catchjorgeAsked on August 19, 2016 at 11:34 AM
Hi Folks,
I'm working with this form, which on it's own is completely responsive:
https://form.jotformeu.com/form/62313037881352
However, embedded on my site, the form does not become responsive (viewing on iphone 5).
http://georgeguerra.com/application/
I read a previous thread that suggested updating the CSS with custom code, but that did not work for me. I'm copying the fix I attempted below, but this did not work for me:
Answered by david on October 30, 2015 at 04:14 PM
You can try adding mobile responsive CSS to the form:
http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
.form-all {
width: 320px !important;
}
.form-line {
padding-top: 0px !important;
padding-bottom: 0px !important;
padding-left: 3px !important;
}
img.form-image {
max-width: 100% !important;
height: auto !important;
}
#id_1.form-line {
padding-left: 36px !important;
padding-right: 36px !important;
}
}And adjusting the the min/max widths to see if it will include the width of your phone. I tried on a few different devices though and each one the embedded form looked to be mobile responsive.
Page URL: http://georgeguerra.com/application/ -
CharlieReplied on August 19, 2016 at 1:05 PM
Could you please try following the steps mentioned in this guide on how to make your form mobile responsive: https://www.jotform.com/help/322-How-to-make-mobile-friendly-forms-on-JotForm
For the website, I suggest re-embedding it using the iFrame embed code, here's how to get that code: https://www.jotform.com/help/148-Getting-the-form-iFrame-code
If my suggestions did not work, please let us know.
-
catchjorgeReplied on August 22, 2016 at 10:32 AM
The iFrame method was just what I was looking for!!
I went into my wordpress page, copied the iFrame code into the "text" section of the editing area. And presto!
It works perfectly and is responsive. Thanks for your help!
-
JanReplied on August 22, 2016 at 11:06 AM
I've checked your form and I can see that it is now responsive. Glad to hear that the issue is now resolved. On behalf of Charlie, you are welcome. If you need any help or if you encounter any issues, please let us know. Thank you and have a nice day!