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

    How to center-align a form on mobile browsers?

    Asked by leojamesCT on September 10, 2012 at 11:51 PM

    It looks nice in iPhone but doesnt look nice on S3 because it is not centralized. Though it is centralized in browser on computer. Please advice.

    How to make it centralized in mobile?
    This is the code to make it centralized right?

    margin: 0px auto !important;  

    But where should I place it in? 

    Cheers,
    Leo 

    Page URL:
    https://jotform.me/leojamesCT/nurture2012

  • Profile Image

    Answered by leojamesCT on September 11, 2012 at 12:16 AM

    Hmm, hi I need a solution asap. Thanks a lot!

  • Profile Image
    JotForm Support

    Answered by NeilVicente on September 11, 2012 at 02:32 AM

    Your codes are okay. The form looks centered on my android device. However, when I flip the device to use widescreen resolution, the form floats to the left.

    I am not sure if that's just how android devices work. I will do more tests and see if I can find a workaround.

  • Profile Image

    Answered by leojamesCT on September 11, 2012 at 02:59 AM

    Okay Thanks! Hope to hear from you soon!

  • Profile Image

    Answered by leojamesCT on September 11, 2012 at 03:26 AM

    Yup thats what I want to do, to make it centralized even when you tilt the screen to landscape. 
    Andriod device's resolution same as iPhone right, so it shouldnt be a problem viewing it properly.
    S3 has bigger width.

    So I think its actually not centralized in mobile. It just happened to be that iPhone and andriod has the resolution that is exactly the same width as the form. 

  • Profile Image

    Answered by leojamesCT on September 11, 2012 at 11:18 PM

    So is there any solution for it? =)

  • Profile Image
    JotForm Support

    Answered by jonathan on September 12, 2012 at 03:14 AM

    @leojamesCT

    Hi, I just tried your form on my android device, it centers both on profile and landscape orientation. I tried it on an older Samsung Galaxy Y S5360 device.

    Is this resolved for you already? Please update us.

    Thanks.

  • Profile Image

    Answered by leojamesCT on September 12, 2012 at 03:41 AM

    @jonathan

     

    Hey, but on my iPhone device when I flip to landscape orientation its still not centered. 

    Thanks,
    Leo

  • Profile Image

    Answered by leojamesCT on September 12, 2012 at 03:45 AM

    Oh and I tested on S3, its still aligned to the left..

  • Profile Image

    Answered by leojamesCT on September 12, 2012 at 03:46 AM

    Really appreciate your help, hope we can have a solution to it! =)

  • Profile Image
    JotForm Support

    Answered by jonathan on September 12, 2012 at 05:05 AM

    @leojamesCT

    I was able to reproduce the left alignment in iphone 4S when in landscape mode. It was fine on other devices though. Perhaps a specific CSS code is needed to centralized it on Iphone when in landscape orientation. But I could not produce the correct CSS code for it (if there is ever one).

    I suggest we also wait a while for my other colleagues take on this. Perhaps someone can produce the right CSS needed to do it.

    Thanks.

  • Profile Image

    Answered by leojamesCT on September 12, 2012 at 05:36 AM

    @jonathan

    Alright thanks for the help! =) Do update me if you all have the right CSS needed for it. Thanks!

    Cheers,
    Leo 

  • Profile Image
    JotForm Support

    Answered by NeilVicente on September 12, 2012 at 12:37 PM

    Leo,

    The codes below should work:

    body {
    text-align:center;
    }

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

    I went ahead and applied the said changes to your form.

    Please check it out then let me know if there are issues.

  • Profile Image

    Answered by leojamesCT on September 12, 2012 at 10:39 PM

    Hey NeilVicente,

    Thanks a lot! it works! 

    Cheers,
    Leo