Having issues with iFrame size within a mobile website

  • poolmanagementgroup
    Asked on March 11, 2017 at 8:44 PM

    We are using Wixsite for our hosting on a new website.  We are having an issue with the mobile responsiveness for our Jotform within a particular page.  The link to the page is: http://admin43034.wixsite.com/secondary/copy-of-childrens-parties and the issue is under the "Request Lifeguards" tab.  This is fine on a tablet, but displays too large on iPhone devices - I've been viewing on 6 plus.  Any help is appreciated.

    Jotform Thread 1089137 Screenshot
  • Boris
    Replied on March 12, 2017 at 7:12 AM

    I have checked your form on its own, over its direct link, and I see that it currently has a horizontal scrollbar:

    https://form.jotform.co/63563858351868

    Your form has a minimal width of 793 pixels in mobile view at this time, and that issue comes from the styling of your form's Time fields:

    Having issues with iFrame size within a mobile website Image 1 Screenshot 20

    The first thing I'd recommend is resolving this issue with the display of your time fields. We can do this by injecting the following custom CSS into your form:

    li[data-type="control_time"] { width: 100%; }
    @media screen and (max-width: 640px) {
        li[data-type="control_time"] .form-sub-label-container {
            width: 30%;
        }
    }

    Please try it out, and let us know whether it resolves the issue you were having with the embedded form as well. Thank you!

  • poolmanagementgroup
    Replied on March 12, 2017 at 1:22 PM

    Thanks!  That fixed the mobile sizing issue.  I also found that a few of those areas were"Shrunk" and when I turned that off, it also fixed the issue.  However, now that that is fixed, the form doesn't act right when filling out.  As you start filling in the form, the form will drop way down into the form and you have to scroll back to where you were to know what to fill in next.  Any ideas?  Same form and also happening on the Swim Lesson Registration form.