Form is not centered when zooming using the mobile device

  • Profile Image
    scrltd
    Asked on June 17, 2020 at 08:43 AM
    Error message attached.  But my real issue has to do with the mobile version of the form. When I open it on my phone, it shows up extremely zoomed in. When I pinch the screen to zoom out, it zooms very far out and the white form area is aligned to the left of the screen, and my background is awkwardly showing on the right. How do I make it so that the white form is perfectly centered on the screen, without my background showing? Screenshot attached. 1592395958Screen Shot 2020-06-17 at 8.09.                         1592395977IMG_3463.PNG
  • Profile Image
    Vanessa_T
    Answered on June 17, 2020 at 09:00 AM

    I assume this is the form you are referring to, https://www.jotform.com/form/201605756893059.

    I just tried to open this with my android phone, zoomed in, zoomed out, dragged left and right but I could not replicate the issue.

    Can you please share to us the browser and device you are using?

  • Profile Image
    scrltd
    Answered on June 17, 2020 at 09:03 AM

    Safari on an iphone. The first page of the form is fine. It's the second page where the issue arises. Can you try again and let me know?

  • Profile Image
    Bert_A
    Answered on June 17, 2020 at 10:27 AM

    Hi there,

    I was able to replicate the issue on an iPhones/Safari.

    To resolve this, kindly please add the following CSS to your form.

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

        .form-matrix-table,.form-dropdown,.form-textbox,.form-all,.form-textarea,.form-radio,.form-checkbox {

            font-size : 16px !important;

        }

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


    Please let me know should you need further assistance.




  • Profile Image
    scrltd
    Answered on June 17, 2020 at 10:35 AM

    Thank you. It "half" solved the problem. When I click to the 2nd page, the form was perfectly centered on the screen (thank you) BUT I was still able to zoom out and the form became aligned to the left again. 

    I followed the directions in the guide you sent me, but there was also already some CSS information in the Styles section of the Form Designer. I pasted your CSS information and left the previous CSS info there too. Should I have deleted it first? I really have no idea what I'm doing with this CSS stuff so I didn't want to mess around too much. I took a screenshot of what the CSS info looks like right now. Please advise. 1592404461Screen Shot 2020-06-17 at 10.3

  • Profile Image
    JohnRex
    Answered on June 17, 2020 at 11:16 AM

    Please try replacing that codes with this one: https://pastebin.com/7Av2XYDK 

    This will disable zoom on text fields, dropdowns, and input fields.

    However, if you are manually pinching the screen to zoom in or zoom out, that can no longer be controlled on Jotform as it is a browser feature.

    But if you're familiar with HTML, you can also try disabling zoom by manipulating your form source code and adding the following meta code between the head tag of your website's source code where you are embedding the form.

    <meta name="viewport" maximum-scale=1.0 user-scalable=no />