Authorization Form not viewable on my mobile website

  • RSpratt
    Asked on October 14, 2016 at 2:09 PM

    I am unable to get my form to view on the mobile site.  I added the mobile responsive widget, but it still cuts off the form to the left and right.  Even though I have the scroll "on" and embedded the iframe code, it won't work.  It shows up on the desktop version, but when I got to mobile, it won't work.

     

     

  • Mike
    Replied on October 14, 2016 at 6:34 PM

    I have added the next CSS to add some paddings around the form.

    .form-section {
    padding-left: 10px;
    padding-right: 10px;
    }

    Authorization Form not viewable on my mobile website Image 1 Screenshot 30

    The form seems to be fine on my phone.

    Authorization Form not viewable on my mobile website Image 2 Screenshot 41

    Thank you.

  • RSpratt
    Replied on October 17, 2016 at 9:44 AM
    It still is not working on my iphone when I try and pull it up. Here are screen shots of what it looks like on my phone. Sides and bottom are cut off.




    ...
  • Chriistian Jotform Support
    Replied on October 17, 2016 at 11:21 AM

    Hi,

    I am performing tests to iPhone. I will be back as soon as possible.

  • Chriistian Jotform Support
    Replied on October 17, 2016 at 11:29 AM

    Hi,

    The image you sent did not reach this thread. To properly attach an image, please go to this thread https://www.jotform.com/answers/961450 and click the Attach Photo icon as shown below.

    Authorization Form not viewable on my mobile website Image 1 Screenshot 30

     

    I did a test in iPhone emulator. Is this how it looks like from your end?

    Authorization Form not viewable on my mobile website Image 2 Screenshot 41

     

    If so, can you please inject the following CSS to your form?

    @media (max-width: 480px) {

       .form-line {

    width: 80%;

    }

    }

     

    Do let us know how it goes.

  • RSpratt
    Replied on October 17, 2016 at 12:44 PM
    It still doesn’t work. This is what my html code looks like that I import into our website builder. I have to remove all the script language or it doesn’t scroll and conflicts. What needs to be placed in the hmtl code to make it work on the iphone? Because it doesn’t work by entering the injected CSS on the form, as requested?









    ...
  • Elton Support Team Lead
    Replied on October 17, 2016 at 2:12 PM

    This is how the embedded form looks like when I check it on iPhone simulator.

    Authorization Form not viewable on my mobile website Image 1 Screenshot 30

    There's also no cut-off on Android

    Authorization Form not viewable on my mobile website Image 2 Screenshot 41

    The responsiveness of the form is working just fine. Problems like this are commonly due to the container styles where the form is placed. I suggest you check the responsiveness of your page if you see cut-offs, you can add padding on the containers where you've placed your form embed code. If you can also configure the page height to automatic, that would get rid of the iframe scrollbar.

    If the issue persists, please provide a screenshot so we can assist you further with this.