Cannot get my form to center align in iPhone 4 landscape mode, or iPhone 6 portrait mode.

PROBLEM: Cannot get form to center align in iPhone 4 landscape mode, or iPhone 6 portrait mode.

FORM URL: http://www.hardballrally.com/register

CMS PLATFORM: WORDPRESS

THEME: DIVI 2.7.8

SOLUTIONS TRIED: 

1. Using iFrame embed code

2. Adding suggested custom CSS code.

body {
text-align:center;
}

.form-all {
margin: 0 auto !important;
}

Nothing seems to work--and after trying several different CSS suggestions, I cannot be sure that I haven't broken the form myself. It centers fine in a web browser--and iPhone 4 in portrait mode. But no matter the custom code insertion, I can't get it to move off the left side of a landscape window on an iPhone 4, or the portrait window of an iPhone 6. I'm imagining the same problem exists for iPhone 5.

Thank you for reviewing my form, and responding with a solution.

P.S. - The form seems to center fine in the JotForm emulators.

I checked the form and I can confirm that it does not center when in mobile.

After investigating the code, I discovered that a parent div where the iFrame is embedded is causing the issue. It's margin is set to 0 and 2 so the div will always be left aligned in mobile. To resolve this, please add this code to your Wordpress CSS. Do not inject the code in the form css. You will need to add the code below into your wordpress css.

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

.et_pb_row_1 {

    margin: auto !important;

}

}

If you need further assistance, please let us know.
Regards.

Thank you for finding the parent div margin error. I was able to go in and change the setting--which in turn allowed the form to center in landscape mode on iPhone 4 and iPhone 6--but I am still having problems in portrait mode on iPhone 4.

Now, the form is pinned to the right side of the portrait window on iPhone 4. It appears that there is some sort of hard left margin--that is pushing the form beyond the max width of the screen. I've reverted all padding and margin settings to theme default--to try and fix the problem, with no success. 

I also tried adding the css code you sent to the Wordpress CSS--but it didn't seem to do anything.

Thanks for your continued effort to solve the mystery. 

I see that the form is indeed pinned to the right side. This may be because the iframe has a set width that is wider than the viewport and since a margin is also added, it extends far to the right.

A possible way to resolve this is to remove the margin when the viewport is the size of the iPhone 4. That way the form will fit exactly to the width of the screen. Please add this code to your Wordpress CSS:

@media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {

.et_pb_row_1 {

    margin: 0 !important;

}

}

If the issue persists, please let us know.
Cheers.

Thank you. The new bit of CSS code fixed the problem. Much appreciated.