How to have an image span the whole form

  • Profile Image
    socialkey
    Asked on August 16, 2012 at 11:29 PM

    I have a form on my facebook app that I would like to span the whole width of the form (instead of having white on each side).

     

    How do i get it so the image spans the whole 810px?

  • Profile Image
    jeanettebmz
    Answered on August 17, 2012 at 12:11 AM

    You may want to change your form's width according to the size of your website. You can easily do this with JotForm.

    While you are editing your form click on the "Form Style" tab on the toolbar:



    Then click on the Form Width button to adjust your form's width:



    You'll be able to see how wide your form is during the adjustment by the help of a dashed border:



    When you finish your adjustment, click preview and see the results. Always make sure to test your form before adding it to your site.

    In your case , change the form width to 810 to accomplish what you are looking for


  • Profile Image
    socialkey
    Answered on August 17, 2012 at 12:30 AM

    Yeah i understand this. My form is already set to 810px wide. I just want to know how I can have the image span the whole 810px with no borders or anything. Currently there is padding applied (by default it would seem). I want it so there is no white space.

  • Profile Image
    jeanettebmz
    Answered on August 17, 2012 at 12:33 AM

    What is the form ID or the name of your form so I can further check?

  • Profile Image
    socialkey
    Answered on August 17, 2012 at 12:46 AM

    "Precious Peg Entry Form" is the form name. I'm not sure how to get the form ID. I just want it so when it shows up on facebook the top image spans the whole form (the image is 810px but had to make it smaller so it fitted in the form as it had the padding on the right)

  • Profile Image
    idarktech
    Answered on August 17, 2012 at 01:32 AM

    @socialkey,

    Would you like it to be like this? Kindly check this cloned form of yours: https://www.facebook.com/JotFormPage/app_190322544333196

    Unfortunately, we can't use the full width of the FB page because facebook has its padding by default and we can't change them.

    Incase you'd like to use my suggestion above, please clone this form back: http://form.jotform.me/form/22290712248450?, gets its source code and embed it to your FB page.

    Hope this helps. Thank you!

  • Profile Image
    socialkey
    Answered on August 17, 2012 at 07:35 AM

    Cool thats what i wanted! How do I get the image to align far right in jotform (like you have done). Just so I can do it in the future.

  • Profile Image
    idarktech
    Answered on August 17, 2012 at 08:14 AM

    Hello,

    I've actually inject some CSS codes to your form in order to remove the form paddings. After that, I have resized the images by dragging them to the right. (just hold the image placeholder and drag it to resize them).

    Here's the CSS codes you need:

     

    .form-all{

    padding-top:0 !important;

    }

    .form-line{

    padding-left:0 !important;

    padding-right:0 !important;

    }

    To inject that in your form, please follow this simple guide: How to Inject Custom CSS Codes

    After injecting this CSS codes, you will notice a gap (space) on the right side of your images, you can then resize them to use the full width of your form.

    Let me know if you need further assistance about this. Thank you!