How to center-align a form on mobile browsers?

  • Profile Image
    leojamesCT
    Asked 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 

  • Profile Image
    leojamesCT
    Answered on September 11, 2012 at 12:16 AM

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

  • Profile Image
    NeilVicente
    Answered 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
    leojamesCT
    Answered on September 11, 2012 at 02:59 AM

    Okay Thanks! Hope to hear from you soon!

  • Profile Image
    leojamesCT
    Answered 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
    leojamesCT
    Answered on September 11, 2012 at 11:18 PM

    So is there any solution for it? =)

  • Profile Image
    jonathan
    Answered 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
    leojamesCT
    Answered 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
    leojamesCT
    Answered on September 12, 2012 at 03:45 AM

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

  • Profile Image
    leojamesCT
    Answered on September 12, 2012 at 03:46 AM

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

  • Profile Image
    jonathan
    Answered 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
    leojamesCT
    Answered 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
    NeilVicente
    Answered 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
    leojamesCT
    Answered on September 12, 2012 at 10:39 PM

    Hey NeilVicente,

    Thanks a lot! it works! 

    Cheers,
    Leo