Form Alignment On Mobile (Portrait Orientation)

  • Profile Image
    cmfNM
    Asked on September 09, 2019 at 07:45 AM

    Dear Jotform,

    My form not look so good on mobile with portrait orientation. But, everything look good on other devices (tablet & desktop).

    I cannot find any setting for changing the alignment on mobile device. Please assist me.

    Thank you.

  • Profile Image
    AshtonP
    Answered on September 09, 2019 at 09:09 AM

    Please add the below CSS code to your form and it will be aligned o center.

    .form-all {

           margin: auto !important;

    }

    Here is a guide that will help you to inject CSS code to your form: How-to-Inject-Custom-CSS-Codes

    Below is a screenshot from the form preview.  I have also cloned your form and injected the above CSS code to the same. Here is the link to the cloned form: https://form.jotform.com/92514074948969

    1568034511The Easiest Online Form Builde

    Let me know if you have any questions or need any further help from our end.

  • Profile Image
    cmfNM
    Answered on September 09, 2019 at 09:26 AM

    Hi,

    Thank you for your quick response. As you can see, header background colour also not covering full form width on mobile view (portrait). How can I make it full covered?

    Really appreciate your help.

  • Profile Image
    AshtonP
    Answered on September 09, 2019 at 11:17 AM

    Please add the below CSS as well:

    @media only screen{

    .form-input-wide{

    width: 111%;

    margin-left: -15px;

    }

    }

    Let me know if you need any furthr help fform our end.

  • Profile Image
    cmfNM
    Answered on September 09, 2019 at 11:32 AM

    Hi,

    Just try the css but its not working. Anyway, thanks for the help.


  • Profile Image
    Augustine_O
    Answered on September 09, 2019 at 12:24 PM

    Hello, 

    The suggested codes worked fine from my end. You can try injecting the CSS code into the form. Please, do not forget to click the SAVE button after to implement the modification. 

    See image of the CSS code injection below: 

    1568046208The Easiest Online Form Builde

    And this was the result: 

    1568046249The Easiest Online Form Builde

    Please, try it out and let us know how it works for you. 

    Thanks.