Remove extra white space in mobile view.

  • mappelbaum
    Asked on February 20, 2024 at 8:37 PM

    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.

    Remove extra white space in mobile view Screenshot 30Remove extra white space in mobile view Screenshot 41

    Jotform Thread 12095481 Screenshot
  • Ravi JotForm Support
    Replied on February 20, 2024 at 10:30 PM

    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.

    How to change Fonts to Calibre and Grifo? Image 1 Screenshot 30 Screenshot 10 Screenshot 10

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

    How to change Fonts to Calibre and Grifo? Image 2 Screenshot 41 Screenshot 21 Screenshot 21

    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.

  • mappelbaum
    Replied on February 21, 2024 at 7:33 AM

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

  • Sonnyfer JotForm Support
    Replied on February 21, 2024 at 7:41 AM

    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:

    Remove extra white space in mobile view Screenshot 20

    Let us know if you need any more help.

  • mappelbaum
    Replied on February 21, 2024 at 7:06 PM

    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.Remove extra white space in mobile view Screenshot 20

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

  • Raymond JotForm Support
    Replied on February 22, 2024 at 2:27 AM

    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.

  • mappelbaum
    Replied on February 22, 2024 at 8:01 AM

    thx. that's better but still not great in this screenshotRemove extra white space in mobile view Screenshot 30


    Also i would prefer the red above "pls select a sponsorship level" to be even narrower.Remove extra white space in mobile view Screenshot 41