The Phone Number field is cutoff when viewed from mobile

I try to program a field for mobile phone in the form. In all types of screens it is doing well except horizontal screen for the mobile phone. The field is cut off to about the half (see print screen)

Could you solve this?

Best regards,

I tried this on my own Android phone (with Chrome) but failed to reproduce the issue shown on your screenshot. Here's how it looked like from my perspective:

Is your issue resolved? If not, can you please get back to us with the following so we can attempt to reproduce this:

🔘 Make and model of the phone you're using to test this

🔘 Android version you're running

🔘 And the browser you're using

Wel very strange because I used your own jotform example and clic on the left one (vert cellphone exemple) and I still have  the same image. So please explain me. On mine celphone it gives the same result, so for me the problem is not solved. When I use the horizontal celphone example the fill in plane is complete. 

Horizontal exemple:GSM nr fill-in

Vertical exemple: GSM nr fill-in

Those images are taken from your own website!!!

Best rdgs,

Hi HarmonieLint,

The problem is caused by CSS. The width of the span element is 31%.

To solve this please inject some Custom CSS Code to your form.

CSS to copy and paste to your form:

@media screen and (max-width: 480px),screen and (max-device-width: 767px) and (orientation: portrait),screen and (max-device-width: 415px) and (orientation: landscape) { [data-type=control_phone] .form-sub-label-container:first-child { width: 100%; margin-right: 4%; }}




If you don't know how to inject Custom CSS, please take a look at the guide below

https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

Please let me know if you have any problems.

Happy to hear that there was a missing CSS code. I injected it on the correspondent field and wonderfull it is working!

Strange that all the others number fields didn't had to receive this CSS injection.

Nicely solved

Best rdgs