Why is there so much space above my header image?

  • Profile Image
    lynnwaldrop
    Asked on December 29, 2014 at 08:59 PM

    Hi, I just have one form. It has a header image. When I view it in a browser, there is all this space above the image. I can't seem to find any padding or spacing that should create that, or a field that is blank...can you tell me how to get my header up to the top of the window? The image does not have any white space above it either.

     

    Thanks.

    Aimee

  • Profile Image
    seanmccthy
    Answered on December 30, 2014 at 12:31 AM

    Hey Aimee,

    I have analyzed your custom injected CSS codes and I did some modifications. I have resolved the issue that you are currently experiencing with this form on desktops but I am not entirely sure if these modifications will affect the forms display on all mobile devices. I did some checks with my Galaxy Tab 3 and it is showing just fine but I am aware that these injected CSS codes were intentional installed to ensure that the form is properly viewed on all devices. 

    Please take a look at my edition of your form: http://form.jotform.co/form/43628622344859?

    Due to the extensive length of your injected CSS, I will just provide snippets for the styles that I have made adjustments to.

    Original: @media screen and (max-width: 480px) {.jotform-form {padding: 10px 0;}}

    Modified: @media screen and (max-width: 480px) {.jotform-form {padding: 0;}}

    -----

    Original: @media screen and (min-width: 480px) and (max-width: 768px) {.jotform-form {padding: 30px 0;}}

    Modified: @media screen and (min-width: 480px) and (max-width: 768px) {.jotform-form {padding: 0;}}

    -----

    Original: @media screen and (min-width: 768px) and (max-width: 1024px) {.jotform-form {padding: 60px 0;}

    Modified: @media screen and (min-width: 768px) and (max-width: 1024px) {.jotform-form {padding: 0;}

    -----

    Original: @media screen and (min-width: 1024px) {.jotform-form {padding: 90px 0;}}

    Modified: @media screen and (min-width: 1024px) {.jotform-form {padding: 0;}}

    ----

    Original: 

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

    .form-line {padding: 12px 36px;}

    Modified: 

    .form-line {margin-top: 0; margin-bottom: 12px; padding-left: 36px} 

    To make things a bit easier for you clone my edition of the form and continue making adjustments or, if you wish, you can simply copy my Inject Custom CSS codes into your edition of the form. I will await your response. I hope this fixes your issue.

     

    Cheers!

     

    seanmccthy

     

     

  • Profile Image
    seanmccthy
    Answered on December 30, 2014 at 09:08 AM

    Hey Aimee,

    Click Here for CSS Codes

    I came up with a better solution for you as it relates to injecting my CSS codes into your version of the form. Please copy the code under the CSS tab in the table from the link above and paste it in the Custom Injected CSS section for your form. Instead of deleting the original codes, I simply use the comment code (/**/) for the browser to ignore it. The adjustments I made was clearly pointed out if you need to do additional tweaking.

    Please let me know if this helps in any way. If you need further assistance please feel free to ask! :) 

    Cheers!
    seanmccthy

  • Profile Image
    Carina
    Answered on December 30, 2014 at 10:36 AM

    Hello Aimee

    Please add this css code to your form:

    .jotform-form {
           padding-top: 0;
    }
     
    If you need further support or clarification please let us know as we are here to help.
     

    @ seanmccthy
    Thank you for the solution provided.