How to centralise fields one on mobile devices in landscape mode?

  • Profile Image
    ipbr21054
    Asked on March 11, 2016 at 06:14 PM

    Hi,

    Here is the form in question https://form.jotformeu.com/60705884010349

    Ive managed to change a few things to what I require to use but unable to center fields and the text above fields to the page. 

    Im currently viewing the form on iPhone & iPad but Im seeng a slightly different view in portrait or landscape on both devices & would be nice to at least look the same.

     

    Is it possible please for you to advise me the code & where to put it or make the edit for me so......

    Fields are central to screen whether portrait/landscape & iPhone/iPad is used. 

    Text about each field is also central to screen whether portrait/landscape & iPhone/iPad is used. 

     

    Many Thanks.

  • Profile Image
    BDAVID
    Answered on March 11, 2016 at 06:46 PM

    I checked your form and it does show centered:

    What is not centered according to you? Could you please share a screenshot to illustrate what you mean?: https://www.jotform.com/answers/277033-How-to-add-screenshots-images-to-questions-in-support-forum 

  • Profile Image
    ipbr21054
    Answered on March 11, 2016 at 07:18 PM

    The questions are to the left of screen. 

    The input fields are to left of screen. 

     

    Make EVERYTHING central to screen. 

     

  • Profile Image
    ipbr21054
    Answered on March 11, 2016 at 07:25 PM

  • Profile Image
    Kevin_G
    Answered on March 11, 2016 at 09:27 PM

    You may try injecting this CSS code: 

    #id_19, #id_16, #id_20, #id_21, #id_22{

        margin-left:20%;

    }

    Or also making your form mobile responsive, this guide will help you to achieve it: http://www.jotform.com/help/311-How-to-make-Forms-Mobile-Responsive

  • Profile Image
    ipbr21054
    Answered on March 12, 2016 at 06:35 AM

    Hi,

    I tried that but not what i was look for.
    However i just need to centralise the text "YOUR NAME / YOUR MESSAGE" etc etc over the respective field.

    I injected css text-align:center; but had no affect at all ?

     

  • Profile Image
    Nik_C
    Answered on March 12, 2016 at 07:31 AM

    To center the labels in your form you will have to inject the following CSS code:

    .form-label{

    text-align:center!important;

    }

    To inject the custom CSS code to the form you need to go to Preferences. In the preferences choose Form styles and add the custom CSS code i provided to the Inject custom CSS field.

     

    Hope this helps

  • Profile Image
    ipbr21054
    Answered on March 12, 2016 at 10:39 AM

    Hi,

    Very strange.

    I injected the code like advised and can see it alter no problem.

    I saved the edit and viewed it on my page.

    I have noticed with the text centered my submit button changes from red to grey/silver.

  • Profile Image
    ashwin_d
    Answered on March 12, 2016 at 11:25 AM

    Hello ipbr21054,

    I did check your form and it seems to display the labels centre aligned correctly. Please check the screenshot below:

     

    Have you embedded your form in any webpage where you are having this issue with? Please share the web page URL and we will take a look.

    We will wait for your response.

    Thank you!

  • Profile Image
    Ian
    Answered on March 12, 2016 at 11:51 AM

    The text is Center correct. 

    Since injecting the code I noticed the submit button changed from red to silver. 

    I have now fix the fault. 

  • Profile Image
    ipbr21054
    Answered on March 12, 2016 at 11:53 AM

    I applied the same code to my other form but the drop down field will not Center. 

    It can be seen here http://form.jotformeu.com/form/60712393428355?partNumber=Mazda005 

  • Profile Image
    Nik_C
    Answered on March 12, 2016 at 12:26 PM

    It doesn't work since the CSS that you injected is for text alignment, it doesn't hit drop-down.

    For drop-down field please inject this CSS:

    .form-input-wide.jf-required {

        margin:auto;

    }

    It will look like this after injecting CSS:

    Hope it helps!

    Do get back to is if it doesn't.

  • Profile Image
    ipbr21054
    Answered on March 12, 2016 at 01:22 PM

    Perfect thanks

  • Profile Image
    Nik_C
    Answered on March 12, 2016 at 01:37 PM

    You're welcome.

    I'm glad it worked for you!

    Best regards.