Responsive form fields not lining up

  • Profile Image
    Asked on August 27, 2015 at 05: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.

    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.

    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.



  • Profile Image
    Answered on August 27, 2015 at 10:16 PM


    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.

  • Profile Image
    Answered on August 27, 2015 at 10:29 PM


    Here's the cloned form with the changes you mentioned: 

    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: 

    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.


    Do let us know if that works.


  • Profile Image
    Answered 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:


    Thanks for all your help

  • Profile Image
    Answered on August 28, 2015 at 03:05 PM

    Check this: If possible, please use an actual device for checking the changes.