Remove extra white space in mobile view.

Can you help me get ride of the extra white space below "pls select a sponsorship level" and also above "individual tickets". There is also extra white space in b/w each of the sponsorship levels on mobile. And an extra line below "how many people (including yourself)...." see attached screenshots.

Hello Melanie Appelbaum,

Thanks for reaching out to Jotform Support. Please add the below CSS code in your form to remove the extra white space and line you mentioned in your post.

@media screen and (max-width: 480px){

div#cid_124,div#text_129 { margin-bottom: -40px; }

li#id_133,li#id_134,li#id_135,li#id_136,li#id_137,li#id_138 { margin-bottom: -50px; }

div#cid_129 { margin-top: -40px; }

li#id_5 {

  margin-top: -30px;

  margin-bottom: -40px;

}

li#id_131 { visibility: hidden; }

}

It is really easy to add the CSS code in your form, let me show you how :

• In Form Builder, Click on the Paint Brush icon in the top right corner of the screen.

• Go to the Style menu.
• Scroll down to the end and add the above CSS code in the Inject Custom CSS section.

We also have a complete guide on How to Inject Custom CSS Codes that you can check out for more information.

I have made changes in the cloned form. Here is the link to the clone form. If needed, you can clone my form to check the CSS code and its placement. We also have a guide on How to Clone an Existing Form From a URL that you can check out.

Reach out again if you need any other help.

much better on mobile but the double line is still appearing on desktop.

Hi Melanie,

I'm very sorry to hear that. You can include the below CSS Code to your form to remove the upper horizontal line that's appearing on your form:

/* Remove extra horizontal line at the bottom part of the form - #12095481 */

#cid_131 .divider {

  display: none;

}

/* Code ends here */

It should look like this afterward on desktop:

Let us know if you need any more help.

better. thanks. Can we also limit the extra white space above and below each field/section and the large red bar above the form on our website where we have the form embedded? This would need to apply to both mobile AND desktop pls. here is one screenshot but the white space is visible in other places as well.

https://www.scarsdalefoundation.org/2024-scarsdale-bowl-dinner.html

Hi Melanie,

Thanks for getting back to us. I understand you'd like to reduce the white spaces between each field on your form. To do that, please add the following codes to your form's CSS:

/* make fields more compact - 12095481*/

.form-all, #id_124 {

 margin-top: 0px;

 margin-bottom: 0px;

}

.form-line {

 margin-top: 4px;

}

p, #text_124 > p{

 margin-top: 8px;

 margin-bottom: 0px;

}

#id_124 {

 padding-bottom: 0px;

}

#id_133, #id_134, #id_135, #id_136, #id_137 {

 margin-bottom: -50px;

}

#text_129 > p, #id_129{

 margin-top: 4px;

 margin-bottom: 4px;

}

/* Ends here */

Please test this cloned demo form to see the codes in action before applying it to your form or clone it to your account to inspect it further.

Give it a try and let us know if you need any help.

thx. that's better but still not great in this screenshot

Also i would prefer the red above "pls select a sponsorship level" to be even narrower.