Full Name Field is Not Aligned on Mobile View

Hi,

See attached screenshot of survey when previewed in mobile view.

• last name field isn't lining up correctly (w/ first name field) - and there needs more spacing after "first name" and before the last name field box
  
  

Thanks!

Hi Erin,

Thanks for reaching out to Jotform Support. To correct the Full Name field alignment on mobile devices, add custom CSS to your form. Let me show you how to do it with the cloned version of your form:

1. First, copy this code:

@media screen and (max-width: 480px) {

  /* Ensure the name-wrapper stacks vertically */

  #id_69 .form-input-wide > div[data-wrapper-react="true"] {

    display: block !important;

    width: 100% !important;

    padding: 0 !important;

    margin: 0 !important;

  }

  /* Make each name sub-container full width and remove inline floats */

  #id_69 .form-sub-label-container {

    display: block !important;

    float: none !important;

    width: 100% !important;

    max-width: 100% !important;

    margin: 0 0 10px 0 !important; /* space between fields */

    box-sizing: border-box !important;

    padding: 0 !important;

  }

  /* FIRST NAME: keep input above, label below and add small spacing */

  #id_69 .form-sub-label-container[data-input-type="first"] {

    display: flex !important;

    flex-direction: column !important;

  }

  #id_69 .form-sub-label-container[data-input-type="first"] label.form-sub-label {

    margin-top: 6px !important;

    display: block !important;

  }

  /* LAST NAME: align left and tighten the label spacing (label below input) */

  #id_69 .form-sub-label-container[data-input-type="last"] {

    display: flex !important;

    flex-direction: column !important;

    align-items: flex-start !important;

  }

  #id_69 .form-sub-label-container[data-input-type="last"] label.form-sub-label {

    margin-top: 4px !important; /* bring label closer to field */

    display: block !important;

  }

}

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down, and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

Here's the sample result after injecting the custom CSS codes:

Give it a try and let us know how it goes.

awesome - thanks!