Form is not centered when zooming using the mobile device

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

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?

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?

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.

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. 

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 />