Reduce Vertical Spacing Between two specific Elements Only (Text / Radio Buttons / Configurable Lists, etc)

  • Clintluna
    Asked on August 9, 2018 at 7:46 PM

    Hi, how could I Reduce the Vertical Spacing Between two specific Elements Only (Text /  Radio Buttons / Configurable Lists, etc)

    Tried using the elements ID's and using the margin-bottom / margin-top commands in my code but this did not work. Also, to reduce the spacing between two specific text elements, how would I do this as I did not see a specific ID number for these.

     

    Thanks!

  • John_Benson
    Replied on August 9, 2018 at 10:11 PM

    Could you please provide the form URL so we can check it further? To find the form URL, please follow this guide: https://www.jotform.com/help/401-Where-to-Find-My-Form-URL

    We'll wait for your reply. Thank you.

  • Clintluna
    Replied on August 10, 2018 at 6:01 PM

    Sure, it's: https://www.jotform.com/build/81906589374168

  • Mike_G JotForm Support
    Replied on August 10, 2018 at 7:04 PM

    Thank you for providing us the form.

    Here's the guide that you may use as a reference to resolve your concern — How-to-Reduce-Vertical-Spacing-between-Fields

    Please feel free to contact us anytime if you need any further assistance. You can also provide us the specific fields that you would like its spacing reduced.

  • Clintluna
    Replied on August 14, 2018 at 6:41 PM

    Yeah so it's on Page 2 of this form: https://www.jotform.com/build/81906589374168

     

    Want to reduce the space Between 1) the bottom of the Basic/Full Radio Buttons and the text right below that  2) between the "The limits..." paragraph and the "Do you have..." text. 3) Between the two lines in the same text box "Do you have..." and "You may be eligible..." 4) Between the bottom of "You may be eligible..." and the "Add Vehicle" configurable list button.

     

    On Page 3 of this same form:

    1) Space between the signature box and the text right below that.

     

    Thanks!

  • John_Benson
    Replied on August 14, 2018 at 10:12 PM

    Please add this custom CSS code to your form:

    div#cid_132 {

    margin-top: -30px;

    }

    li#id_112 {

    margin-top: -30px;

    }

    li#id_149 {

    margin-top: -30px;

    }

    iframe#customFieldFrame_117 {

    margin-top: -25px;

    }

    iframe#customFieldFrame_150 {

    margin-top: -25px;

    margin-bottom: -25px;

    }

    li#id_72 {

    margin-bottom: -15px;

    }

    Here's a guide: How-to-Inject-Custom-CSS-Codes

    Here's the result:

    1534299054514543z45 Screenshot 10

    1534299098z21556 Screenshot 21

    I hope this helps. Let us know if you need further assistance.

  • Clintluna
    Replied on August 16, 2018 at 7:56 PM

    Thanks for your reply....So using this code on mine, there is still a large gap between the "Full" button and the text right below (EDIT: just figured this out using "div#text_132")

     

    Also is there a way to reduce the gap between the two lines of text, i.e. "Do you have...." and "You may be eligible...." on page 2 as well.

     

  • Nik_C
    Replied on August 17, 2018 at 12:51 AM

    Yes, you can increase the space between that text by following:

    1) Edit your Text field and add this style to first paragraph:

    style="margin-bottom: 30px;"

    1534481454screencast Screenshot 10

    Let us know if you were able to make it work and if you need any assistance.

    Thank you!

  • Clintluna
    Replied on August 17, 2018 at 5:07 PM

    Thank you this worked!