Element alignment and sizes configuration

2.  Is there any way to have certain elements center-justify so that they resize then the form width is changed?  for example - the picture at the very top of the form (a flag on a pole) - i'd like ot make it smaller and then always have it center-justify - and same thing for the red  horizontal lines throughout the form.

http://www.jotform.com//?formID=51387010252142

Upon checking your form, the top image and the red lines seem to already be centered/justified.

If you are wanting to make your form mobile responsive as well, so that it resizes according to various screen sizes, please follow this guide: How-to-make-Forms-Mobile-Responsive

As editing your form in the Designer will automatically add a cover image to your form as well, you can remove it by going to the Design tab > Form Cover, and clicking on the Remove button.

Here is a form with these edits, so you can take a look if it is what you wanted to achieve:

http://form.jotformpro.com/form/51532375056958 (you can clone it to take a closer look)

Please let us know how it goes.

thanks - but there seems to be a problem with this - let's take a step back - one of hte issues i was having with my jotform was that the builder tools werent working - i couldn't resize text boxes except using custom CSS, and the form was generally difficult to navigate.  One of your support people told me to take out all the custom CSS in the preferences>Form Styles GUI, and PRESTO! the form was much easier to manage and the builder tools worked again.

BUT - when i did what you suggested above and made the form responsive, there was suddenly Custom CSS back int he form again, and again the form was very difficult to edit using the builder tools.  Can i have th form be responsive without it inserting custom CSS?  and if not, should i only make it responsive after the form is finished and finalized?

OK, I understand. From reading your question, you were asking about (1) having the top image and red lines centered on your form, and (2) having your form responsive - the width should be changeable.

When I have looked at your form, and this is still the case, the top image and red lines are already centered on your form.

So it seems that the only thing left since the thread was opened was to make your form responsive, so that the width can be changeable. The instructions for this are provided in the post above.

However, you seem to have performed multiple changes since then, as I can see a big difference in colors from your current form (black text on dark blue background), compared to the form that I have cloned earlier.

As I am not sure what else you are trying to achieve in another thread, and as the red lines and the image you asked about in this thread are already centered / center-justified, it would probably be best if you continue your editing discussion in that other thread, so that we may avoid confusion with my colleagues as to who is suggesting what and for which issue.

If you ever make an accidental change that you would like to undo, please note that there is the Undo button right in the Form Builder, which will help you in the current session. We also have a handy little feature called Form Revisions that allows you to go to a certain form revision.

Please let us know if you need further help or assistance.

thats strange, because i actually didnt make many changes to the form.  But can you just answer me this - does making the form responsive using the method above insert custom CSS or not??

Yes, making the form responsive will insert custom CSS to the form.

It is this custom CSS that is making sure that the form is responsive, and that the input fields respond to the width of the screen.

but when you input that custom CSS into your form, you then lose the ability to change many things via the builder tools, yes?  like the width of text boxes and such.

Apologies for the confusion, here's a brief explanation of it.

By default, you can remove the CSS code found in the Preferences->Form styles.

If you open your Form Designer, and make some changes there, like making the form responsive, it will add a default CSS code at the back end, in this case, it will show in the Preferences->Form Styles->Inject Custom CSS. Please do take note that you don't need to edit anything on it. In short, the codes found here is autogenerated, no need to edit. Every time you update the form's design, this will also be updated.

However, if you wish to inject custom CSS code of your own, you can do that by directly adding your code at the last part of the "Inject Custom CSS" area, you'll notice the text "/* | *//*__INSPECT_SEPERATOR__*/". This is the part that separates the back end design to the custom CSS code that you have.

I would advise that if you will be adding your own custom CSS code, add it directly inside the Form Designer Tool:

I believe this is how the order of priority works in the design.

1st priority would be a custom CSS code that you added.

2nd priority would be the changes you made in the Form Designer Tool.

So let's say you change the width of the text box using the Form Designer Tool, then added your own custom CSS code that also changes the width of that particular text box, the priority design that will be loaded will be the custom CSS code. You can also add emphasis on it like this:

.textbox1 {

width: 150px !important;

}

By adding the word "!important", I'm emphasizing that this will be the priority design to be loaded for that element.

I hope this helps. Do let us know if you need more information on it.

Thank you.