How to reduce height of paragraph box on new form

How to reduce height of paragraph box

Hi Earl,

Thanks for reaching out to Jotform Support. You can reduce the height of the Paragraph element and reduce the gap of space from the two elements by injecting a custom CSS code into your form. Let me show you how:

1. First, copy this code:  

div#cid_160{

 height:300px !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.

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

Paolo, I inserted the code but didn’t work, can you check to see what the problem is?
Thanks Earl
...

Hi Earl, 

You can adjust the height of the paragraph element you're referring to by using custom CSS to make it appear shorter on the form. Let me help you do that:

1. First, copy the CSS code below, which will set the height of your paragraph element to make it shorter.

#text_160{

 height:300px !important;

}

2. Then, 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.

Note that you can adjust the height of the paragraph by changing the 300px value in the custom CSS code to one that better suits your layout preferences. Additionally, you may refer to our guide on How to Inject Custom CSS Codes for more detailed instructions.

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

I can't get it to work, do you see anything wrong?

I can't get this to work, I'm not understanding something. Once you inject the CSS code do you do anything?

Give me every detail because I'm missing something!

Hi Earl,

Reducing the space below your Paragraph element is really easy, let me show you how:

1. In Form Builder, click on your Paragraph field.
2. Next, click on the Pencil icon on its right side to edit it.
3. Delete the blank lines, then click on the Save button on the right side of the field.

Also, if you want to adjust even further the spacing between the paragraph field and the other form fields, you can inject a custom CSS code. Doing that is also easy, let me walk you through it:

1. First, copy this code:

}

#id_160 {

    margin: -50px 0px -30px 0px !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 to the Inject CSS Code box, and delete the code from row 8 to 11.

4. Finally, paste the code provided above. That’s it. The code is automatically saved.

If you want to increase or decrease the space, you can adjust the value -50px and -30px in the code. Also, if you want to reduce the space between 2 Day Dance Intensive - $150 and One Day Workshops - $25 & $35, you will have to edit again the Paragraph field and remove an empty line in between the two parts.

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