Spacing of shrunken fields is off

  • Profile Image
    Asked on September 23, 2017 at 01:50 AM

    On page 2 of the following form, the field for Superintendent Fax doesn't line up vertically with the field above it. It almost looks indented. 

    This happens again on the same page, after the red divider for Principal Fax.

    Again on page 3 with the Percentage of Students on Free and Reduced Lunches field.

    How can I get them to line up?

  • Profile Image
    Answered on September 23, 2017 at 03:29 AM

    When shrinking fields, it's important to move shrank fields to a new line if they are supposed to be rendered on a new line. Going by your form's current layout, I'm assuming you aim to have a 2 column form.

    To fix this alignment issue, you have to move the both Address Fields (System and School Address) on Page 2 to a new line:

    Related guide: Form-Field-Positioning 

    After moving these fields to a new line, inject the following CSS codes to your Form Builder:

    .form-line-column.form-col-3 {

      padding-left: 18px;

      padding-right: 36px;


    Related guide: How-to-Inject-Custom-CSS-Codes 


    The CSS should also take care of the Percentage of Students on Free and Reduced Lunches field.

  • Profile Image
    Answered on September 28, 2017 at 11:43 AM
    I placed the CSS and moved those fields to new lines, but nothing changed. If I go into the Advanced CSS, then it looks the way it should. However, when I go back to the builder, the fields are still out of alignment.
    Alyssa L. Godfrey
    CLAS Director of Commuications & Technology
    P.O. Box 428 | Montgomery, AL 36101
    (800) 239-3616 | (334) 265-3610 | (334) 265-3611 fax
  • Profile Image
    Answered on September 28, 2017 at 12:53 PM

    The alignment does look correct in my colleagues copy of the form:

    If that is the correct formatting, you can clone that copy to your account:

    If any fields specifically are still formatted incorrectly, let us know which ones and we will help adjusting those.