Why is the header image not centered?

  • Profile Image
    sgambilldesign
    Asked on March 15, 2016 at 05:14 PM

    It was centered before I put the password at the top. 

  • Profile Image
    Kevin_G
    Answered on March 15, 2016 at 05:57 PM

    Try injecting this CSS code: 

    img.form-image {

       width: 100%;

       height: 100%;

    }

    This guide will help you to inject the code in your form: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

     

  • Profile Image
    sgambilldesign
    Answered on March 15, 2016 at 06:14 PM

    This CSS code centered the image, but it also made it very small.  

    I'm puzzled because I have several other forms just like this one (I actually cloned this form to make the one in question) and they are working just fine. 

     

  • Profile Image
    Kevin_G
    Answered on March 15, 2016 at 06:26 PM

    Yes, it did it a bit small than before, I found that this is being caused for a Form Collapse that you have added. 

    Seems like the image is centered based on the positions of the Form Collapse, you will need to remove it in order to show the image centered, try doing it, it worked on my testing form: https://form.jotform.com/60746530079963

  • Profile Image
    sgambilldesign
    Answered on March 16, 2016 at 10:23 AM

    I need the form collapse (according to these JotForm instructions) to make the passcode work. Do I just have to be okay with the header being smaller, because I need the passcode to work?  

  • Profile Image
    Ben
    Answered on March 16, 2016 at 11:15 AM

    You could use the following CSS code to resolve this:

    img.form-image {
        left: -80px;
        position: relative;
    }

    It will counter the margin added by the collapse field.

    You should add the same CSS code just like you did earlier with my colleagues code.