How do I align the Heading Text with the rest of my form?

  • Profile Image
    AFreshApproach
    Asked on January 31, 2015 at 02:45 AM

    Here is the form I am working on:

    http://www.theultima.com/events.html

    The "Sign up for Our Events" does not line up with the "Choose Event" Text.

    Here is my injected Custom CSS:

    .form-line, .form-label-left {
    padding-left: 0;
    }
    .form-html {padding: 0px !important;}
    .form-header {padding-left: 0px !important;}
    .form-dropdown {font-size: 1em !important;}
    .form-dropdown {
    font-family: Verdana !important;}
    .form-textbox {font-family: 'Verdana';font-weight: normal !important;font-size: 12px;color: black;}
    /* Change the color of input boxes */
    .form-textbox, .form-textarea, .form-radio-other-input, .form-captcha input, select {
    border: 1px solid black !important;
    }/* For sub-labels under the text boxes */
    .form-sub-label {
    color: black;
    font-size: 12px !important;
    }

    Thanks for your help.

     

  • Profile Image
    Ben
    Answered on January 31, 2015 at 05:39 AM

    To set the header to fall to the left you would need to add this CSS code:

    .form-header {
        margin: 0;
    }

    If you would also like to make the background transparent instead of white, please add this CSS as well:

    body, html, form.jotform-form, div.form-all {
        background: none transparent !important;
    }

    You can inject the CSS code following these steps: Inject Custom CSS Codes

    Do let us know how it goes.

  • Profile Image
    AFreshApproach
    Answered on February 02, 2015 at 04:07 PM

    Thanks but unfortunately the .form-header CSS did not work.  Does it matter where you add it in the Inject Custom CSS?

    Thanks for the transparency CSS.

  • Profile Image
    Ben
    Answered on February 02, 2015 at 04:18 PM

    I always suggest adding the CSS code at the very bottom since last code in there is the one that the browser will use (as it overwrites the same code that were declared before it).

    Can you please try this CSS code?

    .form-header-group {
        margin-left: 0;
    }

    Do let us know if it works.

  • Profile Image
    AFreshApproach
    Answered on February 02, 2015 at 04:50 PM

    Thanks for your help! Placing at the end totally worked.

  • Profile Image
    Ben
    Answered on February 02, 2015 at 05:04 PM

    You are welcome and I am glad to hear that it worked for you :)

    Do let us know if you have any further questions or issues and we would be happy to assist with them :)