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

  • Profile Image
    Clintluna
    Asked on August 09, 2018 at 07: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!

  • Profile Image
    John_Benson
    Answered on August 09, 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.

  • Profile Image
    Clintluna
    Answered on August 10, 2018 at 06:01 PM

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

  • Profile Image
    Mike_G
    Answered on August 10, 2018 at 07: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.

  • Profile Image
    Clintluna
    Answered on August 14, 2018 at 06: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!

  • Profile Image
    John_Benson
    Answered 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.png

    1534299098z21556.png

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

  • Profile Image
    Clintluna
    Answered on August 16, 2018 at 07: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.

     

  • Profile Image
    Nik_C
    Answered 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.gif

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

    Thank you!

  • Profile Image
    Clintluna
    Answered on August 17, 2018 at 05:07 PM

    Thank you this worked!