-
epicfiltersAsked on April 10, 2016 at 5:53 PM
Hi,
I have a website. http://www.epicfilters.com/get-started
I have having a ton of trouble with it showing up correctly for mobile. I read some of your earlier responses where you guys mentioned the user needs to change the CSS. However, I am still having trouble.
Please let me know!Page URL: http://www.epicfilters.com/get-started -
David JotForm Support ManagerReplied on April 10, 2016 at 6:01 PM
First of all, your form's iFrame height needs to be increased:
Please look for the height property of you iFrame code and increase it so your forms display all, try with 1250px.
On regards of the mobile responsive issue, try adding the mobile responsive widget in your form: https://widgets.jotform.com/widget/mobile_responsive
https://www.jotform.com/help/252-How-to-Add-a-Widget-to-your-Form
Let us know if you need more help.
-
epicfiltersReplied on April 10, 2016 at 6:21 PM
Thanks!
Do I need to redeploy the iframe after I add the responsive widget?
-
epicfiltersReplied on April 10, 2016 at 6:37 PM
Still no luck on mobile. What is funny is within Page Cloud mobile it looks perfect, but then when you try an actual mobile phone it does not work!
-
Kiran Support Team LeadReplied on April 10, 2016 at 7:23 PM
If you are changing the height in the iframe embed code, it is required to re-embed the form on your web page. Could you try embedding the form again using complete iframe embed code that can adjust the height automatically? Please refer to the guide below that can help you in getting the iframe embed code for your JotForm.
http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code
If you need any further assistance, please let us know. We will be happy to help.
-
epicfiltersReplied on April 10, 2016 at 7:43 PM
Hi,
We did. We are still having issues with the mobile. It does not look like the mobile widget is working ... Can you please help, I am loosing customers :-(
-
Ashwin JotForm SupportReplied on April 10, 2016 at 9:16 PM
Hello epicfilters,
I did check your webpage and did not find any issue with that. The embedded form is already mobile responsive. Please check the screenshots below:
I believe, reducing the width of your form will help you further. Please inject the following custom css code in form and see if that helps you:
@media (max-width: 480px) {.form-textarea,.form-textbox,.form-dropdown, .form-html
{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;}.form-buttons-wrapper{margin-left:0 !important;}
.form-input {width: 100%;}.form-all{width: 75%;}
.form-sub-label-container {width: 100%;display:block;}
}
The following guide should help you how to inject custom css code in form: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes
Hope this helps.
Do get back to us if the issue persists.
Thank you!
-
epicfiltersReplied on April 10, 2016 at 9:45 PMSo you want me to implement this code?
... -
Ashwin JotForm SupportReplied on April 10, 2016 at 9:47 PM
Hello epicfilters,
Yes, please inject the above custom css code and see if that gives you a better look.
Do get back to us if you have any trouble.
Thank you!
-
epicfiltersReplied on April 11, 2016 at 10:12 PM
Hi,
Still having issues as it is still not fixed. Any other ideas?
-
epicfiltersReplied on April 11, 2016 at 10:45 PMHi,
It is still not working :-( Any other options?
... -
Kiran Support Team LeadReplied on April 12, 2016 at 12:14 AM
As we check the JotForm using direct link on a mobile phone, the form is displaying without any issue.
However, when the web page is checked on the mobile I notice that the object on your web page embedding the form iframe code is slightly larger which might be causing the issue.
Please try reducing the object width to 10px lesser than the existing on your webpage builder and see if that helps. It looks like you are using PageCloud page builder to build the webpage. If you are not sure how to change the width of this object, you may also take support from the web page builder.
If you need any further assistance, please let us know. We will be happy to help.
-
epicfiltersReplied on April 17, 2016 at 9:52 PM
Hi,
I believe have done this and it is still not working. Could you please check if done correctly, and possibly propose an alternative solution if one does exist.
-
jonathanReplied on April 17, 2016 at 11:11 PM
The latest solution provided by our colleague Kiran is something that can be applied only on your website page.
You will need to use your website page editor to modify this part of the code on the page
<div class="object iframe" style="width: 887px; height: 1054px; position: absolute; left: 49px; top: 73px; background-color: rgba(0, 0, 0, 0);" data-alt-style="width: 430px; height: 1662px; position: absolute; left: 7px; top: 200px; background-color: rgba(0, 0, 0, 0);"><iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/60999404528164" frameborder="0" style="width: 100%; height: 100%; border: none;" scrolling="no" marginheight="0" marginwidth="0" data-muted="false">
</iframe></div>
</div>
Let us know if you are not able to do this.