There is some problem with Mobile Responsive widget

  • Profile Image
    WinOnIMG
    Asked on October 05, 2016 at 07:35 PM

    Hello,

    I was trying to use my form on my site on mobile but, I still have to scroll Horizontal to view the from.

     

    Test Device :- Apple iPhone 6 Plus

    OS :- 10.0.2

  • Profile Image
    Kevin_G
    Answered on October 06, 2016 at 12:06 AM

    Unfortunately I have not an iPhone device to test your form, but I have tested in a device emulator and I can see what you're referring to. 

    Reviewing the source code I can see you have embedded the JotForm iFrame code within another iFrame code: 

    Could be possible to embed the form's iFrame code directly in the webpage? 

    You may also try adding this CSS code to  your form: 

    /*-----------RESPONSIVE LAYOUT-----------*/

    .form-line.form-line-column {

    width: 100% !important;

    margin-left:0;

    }

     

    .form-line{

    width: 100%;    

    }

     

    .form-textarea,

    .form-textbox,

    .form-dropdown{

    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 !important;

    }

     

    .form-buttons-wrapper{

    margin-left:0 !important;

    }

     

    .form-input {

    width: 100% !important;

    }

     

    .form-all{

    width: 75% !important;

    }

     

    .form-sub-label-container {

    width: 100% !important;

    display: block  !important;

    }

    This guide will help to inject the code to your form: How-to-Inject-Custom-CSS-Codes

    Please do let us know how it goes. 

  • Profile Image
    WinOnIMG
    Answered on October 06, 2016 at 04:45 AM
    I don't think so, as we use Wix platform to build our site.
    --
    Siddharth Doshi
    ...
  • Profile Image
    WinOnIMG
    Answered on October 06, 2016 at 05:52 AM

    I have tried adding the CSS code but it don't work.

  • Profile Image
    EltonCris
    Answered on October 06, 2016 at 08:59 AM

    @WinOnIMG 

    The form appears to be working properly on iPhone emulators but I was able to reproduce the issue when I check it on iPhone 6+ physical device.

    I don't see any horizontal scrollbar below the form, it's just the form that is draggable horizontally. When I check the iframe URL where the form is embedded, it is looking good on mobile http://www.winonphoto.com.usrfiles.com/html/80d2a4_9b5709b2338eaf342bb05ce75e2d85ee.html

    I suggest you try embedding your form using its iframe embed code. See if this makes a difference.

    If not, let us know so we can assist you further.

  • Profile Image
    WinOnIMG
    Answered on October 06, 2016 at 02:32 PM

    No it is not working 

  • Profile Image
    EltonCris
    Answered on October 06, 2016 at 03:59 PM

    I fixed it for you by injecting this CSS codes into your form.

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

    li#id_14{

    max-width:320px;

    overflow:hidden;

    }

    }

    Would you mind checking it again this time? 

    I think it is the sms confirmation widget that is forcing the fields to expand beyond the form width, the above CSS codes should limit its width and hopefully, that would fix the problem.

    Please let us know.

  • Profile Image
    WinOnIMG
    Answered on October 06, 2016 at 06:02 PM

    Yep, it do work.

     

    Thank You for your help.