Placing a full width logo/banner on form

  • Profile Image
    capria
    Asked on August 01, 2017 at 03:42 PM

    I want to have a new logo designed in a way where it lines up with the width of my form as a banner instead of as a square logo. But I don't know the dimensions my potential logo banner would need to be. Is there a way to find this out? I see that when I put my logo into the form, i can see the logo's dimensions, but I cannot tell what dimensions to make a new logo banner.

     

    Thanks!

  • Profile Image
    Chriistian
    Answered on August 01, 2017 at 05:20 PM

    I want to have a new logo designed in a way where it lines up with the width of my form as a banner instead of as a square logo.

    - The width of your form is 690px so you probably want your logo to have dimensions of 690px by 140px.

    Further suggestion:

    However, that particular width changes based on the device being used to access your form (e.g. laptop, tablet, phone) so rather than having a fixed width banner/logo, I would suggest keeping the same dimensions you have now but place a white background behind your current logo so it will look like a banner taking the full width of your form, regardless of the device being used to access it. See samples below.

     

     

    If that is fine with you, you can inject the following CSS to your form.

     

    .form-all:before {

    background-color: #FFF;

     

    }

     

    You can take a look at my cloned form https://form.jotformpro.com/72126295469969.

  • Profile Image
    capria
    Answered on August 08, 2017 at 12:43 PM
    Hi there,
    Thank you for your help. I would like to make our logo appear as you set it
    up in the cloned form, but can't figure out how to do this. I tried copying
    the CSS you included but I must've made a mistake and it didn't work.
    I'm not experienced with CSS at all and don't know how this should look.
    Kindly,
    Capri Arias
    Administrative Associate
    Spruce Street School
    914 Virginia St.
    Seattle, WA 98101
    206-621-9211
    206-624-2832 Fax
    www.sprucestreetschool.org
    *Spruce Street School is a nurturing educational community that instills in
    a broad range of children the social, emotional, and intellectual skills
    for lifelong participation in a diverse society.*
    ...
  • Profile Image
    Chriistian
    Answered on August 08, 2017 at 12:55 PM

    As per checking your form (http://www.jotform.us/form/72064423309148) the logo is now displayed the same as on the cloned form.

    Please try to check the preview of your form and see if you will be able to see the changes you have implemented. You can view the form using this link: http://www.jotform.us/form/72064423309148.