What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

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

    Asked by msansom on August 09, 2016 at 07:56 PM

    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.

     

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

    landscape OR in portrait mode
  • Profile Image
    JotForm Support

    Answered by Chriistian on August 09, 2016 at 10:00 PM

    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.

  • Profile Image

    Answered by msansom on August 10, 2016 at 07:21 PM

    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. 

  • Profile Image
    JotForm Support

    Answered by Chriistian on August 10, 2016 at 10:09 PM

    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.

     

  • Profile Image

    Answered by msansom on August 11, 2016 at 12:27 PM

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