Responsive form fields not lining up

  • kauseway
    Asked on August 27, 2015 at 5:19 PM

    Can you guys help me finish my form? It is super simple but it is not acting right:

    1) In desktop view:  I want the address field to extend out further and the zip code to be smaller (see the red boxes).  

    Also want the Zip Code, Your email and See your price fields to line up left justified, which it is, but also lined up on the right side too.

    Responsive form fields not lining up Image 1 Screenshot 40

    2. In phone landscape view:  I want the address field to be wider and extend over and the zip code to be smaller (see red boxes.) The your email field drops to its own line and I dont want it to do that.  I want all 3 rows to line up on the right side.

    Responsive form fields not lining up Image 2 Screenshot 51

    3.)In phone portrait view:  The zip code is a number field and for some reason in this view its height is not the same as the enter your address.  The your name and your email fields are on their own row which I want. But again, want the right side to line up on all 4 rows.

    Responsive form fields not lining up Image 3 Screenshot 62

     

    thanks!

  • Charlie
    Replied on August 27, 2015 at 10:16 PM

    Hi,

    I cloned your form for testing purposes, I'll get back to you with a working custom CSS code with the changes you mentioned.

    Thank you.

  • Charlie
    Replied on August 27, 2015 at 10:29 PM

    Hi,

    Here's the cloned form with the changes you mentioned: http://form.jotformpro.com/form/52389383128968? 

    You can clone my form to have a copy in your own account, you can then check how I set it up and the custom CSS code I used. Here's a guide on how to clone my form: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

    The changes I made:

    1. Used the text box field to all of the fields, if you need validation, you can set it there.

    2. I then made the form mobile responsive

    3. Adjusted the width of the form using the Form Designer

    4. Then use a custom CSS code to make the changes you requested, you can find the custom CSS code under the CSS tab area.

    Responsive form fields not lining up Image 1 Screenshot 20

     

    Do let us know if that works.

    Thanks.

  • kauseway
    Replied on August 28, 2015 at 12:07 PM

    That was awesome. Thanks so much! I do have a few minor changes. In phone portrait view the zip code is slightly cut off. Can we make it slightly wider?  And I want "Your name" to be 100% width in phone view and "You email" to be on its own line and 100% width. 

     

    Also, Can you move the hint example on each field over slightly to the right so it is not so close to the left side of the box?

     

    here is the new copied form:

    http://form.jotformpro.com/form/52395223368964

     

    Thanks for all your help

    Responsive form fields not lining up Image 1 Screenshot 20

  • Welvin Support Team Lead
    Replied on August 28, 2015 at 3:05 PM

    Check this: http://www.jotformpro.com/form/52395522707963. If possible, please use an actual device for checking the changes.

    Thanks