How do I individually change the spacing of each inputs question and response box?

I have many inputs some with questions that are short or longer. I want to know how to individually alter each of these inputs to make the question and box close enough together for the shorter questions and for the longer ones have the questions nicely stacked and the answer box close to it as well. Also how do I make all of my yes no choice questions align with one another and keep them in one row. Please let me know.

Hi - You can either shrink the fields through PROPERTIES > ADVANCED > Shrink.

OR adjust their size/spacing by injecting custom CSS. Here's How-to-find-field-ids-and-names

Please give it a spin and let us know if you face any difficulties along the way. We'll be happy to assist you further.

Yes, I figured out how to do that but what if I want email to be on one line? When I shrink, then choose the label alignment to the left it puts email on one and address on another

Also further along in the form, I have a question about the condition of the home. How do I make all the letters stay on one line for instance excellent the t is on another line. I have it shrunk and aligned to the left but when i unshrink it, it takes away the close spacing of the answers.

but what if I want email to be on one line?

Can you please clarify this? Do you wish to have all the text and the input in one line?

In this case, please add the following CSS:

#id_7 label {

 width: 110px !important;

}

If you wish to align other fields as well, please use the following:

label {

 width: 110px !important;

}

How do I make all the letters stay on one line?

Please note that you should preview the form live, from the Publish tab. This way, you will see that the text in the Condition of Home field displayed properly:

Please let us know if you have any additional questions.

Yes, I want Email Address to be on one line and the answer box following instead of on two lines. How do I integrate CSS?

The issue is when I input the CSS it changes all, but I want to create individual widths for each input because some questions are longer than others and I want the answer boxes to be generally around the same distance from each question.

I apologize for forgetting to provide the guide on how to inject custom CSS.

To specify the width of each field and label individually, you first need to find the element's value. You can do this by pressing the F12 key on the form page. This will open a side panel with the inspector. Make sure you are in the Elements tab and select Selector:

Now, you can click on the element of the form you wish to use:

This should highlight the element in the inspector. From there, you can find the element's ID:

You need to use this in the CSS. Please make sure you place # before the element ID, and wrap the width style inside curly brackets:

#label_165 {

  width: 150px;

}

You need to do this with each individual item you wish to edit.

You can view this short Loom video for more information:
https://www.loom.com/share/9763d72c102a4efa83f63cbb114fc90d

Let us know if you have any additional questions.

Thank you. I was able to do that, but it only changes the layout of it on the edited page but when I go to the preview none of these changes show up. How do I make it change the actual final document?

Also, now all of my changes did not save. Do we have to save it somehow?

I checked your form and it seems it indeed didn't save the changes you made. Kindly inject them again and don't forget to press the save button as shown below:

Sorry that is not how I originally made it. I will retry with the saving option but mine did not look like that when editing. Also, in terms of the yes no bubble questions how do I keep them aligned?

The photo you showed me with the save is not using the same custom CSS page as the previous message informed me to use.

Are you still working on this form https://www.jotform.com/203018266651148? It's where I captured the screenshot. As your previously injected CSS codes did not successfully save, I'd suggest reinjecting them and then press Save as mentioned in my previous reply.

As for the Yes/No bubbles, they seem to be aligned on my end. Could you please check again? I cleared your form cache as a precaution.

https://www.jotform.com/build/203018266651148 Yes this is the form im working on. The screen shot you sent is not what mine is supposed to look like. I have my questions aligned the left and I wanted to know how to make the yes or no options in line. In terms of saving it is not allowing me to save the changes I make for the spacing. Would you please give me a tutorial on how to do the spacing changes and save it? and how to align the yes no answer options after making the spacing unique for each?

Also the yes or no questions are showing the question above in the preview but in my editing page I have them aligned to the left and that is how it shows.

I have my questions aligned the left and I wanted to know how to make the yes or no options in line.

Did you mean you want to display them in one line? You can unshrink them to display like this:

In terms of saving it is not allowing me to save the changes I make for the spacing. Would you please give me a tutorial on how to do the spacing changes and save it?  and how to align the yes no answer options after making the spacing unique for each?

Also the yes or no questions are showing the question above in the preview but in my editing page I have them aligned to the left and that is how it shows.

Perhaps your browser cache is preventing you from saving your form. Kindly try clearing it or use a different browser to check if it makes any difference.

As for the spacing, did you mean the space between questions? Or the spacing between the yes and no? If possible, kindly share some screenshots to better illustrate what you're after. Here's How-to-Post-Screenshots-to-Our-Support-Forum

We'll be waiting for your reply.

Sorry I ended up changing my mind about some of the questions I had.

I have moved your last two questions to separate tickets. I will address them shortly via these links below:

https://www.jotform.com/answers/2670603

https://www.jotform.com/answers/2670604