Unable to modify CSS for line spacing on form

  • Profile Image
    Masalamedia
    Asked on December 31, 2012 at 07:50 PM

    I'd really like to reduce the giant gap in the form between a label and text. Can you supply tips on what object is creating the gap? I've tried creating 1px margins at the top and bottom of the elements I can identify but the huge space remains.

    Ive added a custom class to the text labels ("ack_heading") and have altered the "form-line" class with custom CSS to no avail.

     

    .ack_heading {font-size: 16px;font-weight: bold;color: #C30;font-family: Arial, Helvetica, sans-serif;margin-bottom:1px;margin-top:1px;}

    .form-line li{margin-top:1px;margin-bottom:1px;}

     

     

  • Profile Image
    Masalamedia
    Answered on December 31, 2012 at 08:16 PM

    NOTE: I've changed my form slightly so now my long paragraph of text is in my text box, but now the entry field has tons of extra space around it. Again, could use a pointer about what CSS code to alter to bring those fields closer to the text it belongs to.

  • Profile Image
    Welvin
    Answered on December 31, 2012 at 11:27 PM

    Hi,

    Please inject this custom CSS codes to your form:

    .form-line-active {

    background-color: transparent !important;

    }

    .form-line-error {

    background: transparent;

    }

    #id_31, #id_32, #id_33, #id_34, #id_35, #id_36 {

    margin-top: -32px;

    }

    Guide: How to Inject Custom CSS Codes

     

    Thank you!

  • Profile Image
    Masalamedia
    Answered on January 02, 2013 at 03:43 PM

    Thanks Welvin! That css code did the trick and my form looks a lot better.

    I use JotForms to avoid getting too deep into the rabbit hole of CSS. Wish it were easier to control this without the need for such technical expertise.

    Thanks, again.