How can I centre a text box in my form.

  • Profile Image
    FRJotform
    Asked on May 11, 2017 at 08:38 AM

    I would like to be able to have a text box appear in the centre of my form rather than aligned against the left or right margins.

    I know how to centre the text within the box using CSS, but don't know how to centre the box itself. I have previously done this by setting the width of the box and aligning it against the left margin using measurements that just make it sit in the centre however, this method means the that textbook is then not responsive when viewed on a mobile device.

     

  • Profile Image
    EltonCris
    Answered on May 11, 2017 at 09:57 AM

    You can use the following CSS codes to maintain its responsiveness on mobile.

    .form-label,

    .form-input, 

    .form-input-wide  {

        width: 100%;

        text-align: center !important;

    }

    .form-buttons-wrapper {

        margin-left: 0 !important;

    }

    If this doesn't give you the result you wanted, please let us know and provide the form URL in question so we can check it here.

    Regards!

  • Profile Image
    FRJotform
    Answered on May 11, 2017 at 10:44 AM
    Hi there,
    That doesn’t seem to have worked at all.
    Is there no way to just have a text box aligned to the centre?
    The url of the form is https://form.jotformeu.com/61464438809363
    and it’s the first 3 text boxes (Band name, Stage and Date) that I would like to centre and also be mobile responsive.
    I cannot find the option on Jotform to view your form in different device formats. It used to be an option when in preview mode, could you also tell me how to do this now?
    Many thanks
    Melody
    ...
  • Profile Image
    Welvin
    Answered on May 11, 2017 at 11:50 AM

    I've fixed it for you by adding a few custom CSS codes. Please check the codes in the styles tab.

    The mobile preview is currently not available. I would suggest using your browser's mobile emulator instead. 

    https://developers.google.com/web/tools/chrome-devtools/device-mode/