There is some problem with Mobile Responsive widget

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

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. 

I don't think so, as we use Wix platform to build our site.
--
Siddharth Doshi
...

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

@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.

No it is not working 

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.

Yep, it do work.

 

Thank You for your help.