Using mobile theme but form is not responsive on mobile.

Hi,

I am using a mobile theme, but when I upload it to my website and view it on a mobile device, it is not responsive.

I've tried to trouble shoot but cannot seem to fix it. What is the issue?

We link: http://www.collegiateexposurecamps.com/upenn-camp-session-2

go to the bottom of the page where the registration form is.

Thanks

I checked your webpage on android mobile and the forms seem to be responsive there.

May I ask what mobile device were you using when you encountered this issue? If possible, please try embedding the form to your page using the iFrame code instead. Here's how: Getting the form iFrame code.

If the issue still persists, please let us know.
Thank you.

Using an Iphone. Used Iframe. it's still not working.
*Tarek Merchant*
*Founder & CEO*
* *
904-400-2044
tm@imrecruitable.com | www.ImRecruitable.com
...

I can see that there are script tags used when the the form embedded on your site.

 

Can you please try to use this iFrame tag instead? but leave the script tags.

Example:

 <iframe id="JotFormIFrame-70450078309959" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/70450078309959" frameborder="0" style="width:100%; height:3832px; border:none;" scrolling="no"> </iframe> 

 

 

 

Let us know if issue still occurs.

Regards

a little better but the form still scrolls left and right on the iphone.
*Tarek Merchant*
*Founder & CEO*
* *
904-400-2044
tm@imrecruitable.com | www.ImRecruitable.com
...

I checked your site and I noticed that the form is embedded on another page and the page is called on via iFrame on the site (http://www-collegiateexposurecamps-com.usrfiles.com/html/166df4_d9669db923ace302e651832aa2e35f74.html)

 

Can you try to directly embed the iFrame embed code of the form on the site instead of embedding it on a different/separate page and see if this will help fix the issue?

i made the changes and still the same problem. I've tried using different
themes and everything before contacting you the first time.
*Tarek Merchant*
*Founder & CEO*
* *
904-400-2044
tm@imrecruitable.com | www.ImRecruitable.com
...

Thanks. We'll check and investigate this further. Stay tuned.

We found the problem. It is the signature widget in your form that breaks the responsiveness of the form. Unfortunately, this widget isn't designed mobile responsive yet. 

Anyway to fix it on mobile, inject the following CSS codes in your form.

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

.signature-pad-wrapper, canvas.jSignature, div#sig_pad_217 {width: 100% !important;}

}

Guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

Thanks. If it helps, the site is created on WIX.
The contact us form that is at the bottom of the homepage is mobile
responsive. The other forms are not. www.collegiateexposurecamps.com
thx for your help
*Tarek Merchant*
...

Hello Tarek,

I'm sorry, I didn't understand, did the CSS provided by my colleague work for you?

I checked some of your forms from my phone and they were aligned properly.

If you could point us to the ones that are not showing properly it would be very helpful.

Thank you!

Hi. the CSS injection did not work. The signature widget was the issue as
your team stated. Once I removed it everything worked fine.
*Tarek Merchant*
*Founder & CEO*
* *
904-400-2044
tm@imrecruitable.com | www.ImRecruitable.com
...

Hi Tarek,

Apologies if the CSS solution did not work but I am glad to hear that everything worked fine now. But if you still need further assistance, just let us know.

Regards.