Removing the space at the top of the form

  • shardwick
    Asked on September 15, 2015 at 5:37 PM
    I love the spacing of the questions toward the bottom of the form. Can we do that to the top? There is so much room up there.
  • Ben
    Replied on September 15, 2015 at 6:41 PM

    As mentioned on the previous thread: https://www.jotform.com/answers/662817 I think that the space you were referring to is removed using the same code, but if you want to adjust the spacing there are only few things to change in the CSS code:

    #id_1 {
        margin-top: -100px !important;
    }
    ...
    #id_83 .form-image {
        display: block;
        height: 150px;
        margin: 0 auto;
        position: relative;
        top: 80px;
        width: auto;
        z-index: 9;
    }
    @media screen and (max-width:768px) {
    ...
        #id_83 .form-image {
            height: 160px;
            top: 110px;
        }
    }
    @media screen and (max-width:360px) {
    ...
        #id_83 .form-image {
            top: 80px;
        }
    }
    @media screen and (max-width:320px) {
    ...
        #id_83 .form-image {
            height: 100px;
            top: 20px;
        }
    ...
    }

    I have cut out the parts of the code that did not need to be changed to make it easier to follow and marked the parts that can be changed.

    The yellow marker is the part that is a reference for all others. If you change this to 110, then you will need to take away 10 from each value in bold. In the same way, if you set it to 90 (to have more space at the top), you will need to change all other bold values to +10 so it is 30 instead of 20.

    Hope that this helps, but if you have any further questions or wanted to remove some other space, do let us know and we would be happy to assist :)

  • shardwick
    Replied on September 15, 2015 at 8:00 PM

    Yes, I do have further questions...nothing works,  can't even view what you did! Please reply.

  • Kiran Support Team Lead
    Replied on September 16, 2015 at 12:51 AM

    It seems that the changes provided here is already included in the cloned version of your JotForm  provided by our colleague on the other thread. If you want to make any changes to the code, please click on Preferences icon -> Form Styles -> Inject Custom CSS

    Removing the space at the top of the form Image 1 Screenshot 20

    You can find the injected code at the bottom and you may make the changes as referred by our colleague in the last post.

    Let us know if you need any further assistance. We will be happy to help.

  • shardwick
    Replied on September 16, 2015 at 1:05 AM

    I just did exactly as you said and nothing happend. It may have moved up tiny bit, but hardly anything. Also, the codes the other guy listed don't match anymore. Can you PLEASE take a look and just do what I need done? I just need moved up, less wasted space. Does that make sense? PLEASE!!! I have messed with exactly what you told me to do ALL DAY LONG.

  • shardwick
    Replied on September 16, 2015 at 1:17 AM

    Are you still there?

  • shardwick
    Replied on September 16, 2015 at 1:31 AM

    I tried more numbers and it moves the form up!

  • shardwick
    Replied on September 16, 2015 at 1:37 AM

    I was able to move it up a bit, but now the log is off center of the plate. how do I get it back on there?

  • shardwick
    Replied on September 16, 2015 at 1:45 AM

    Anyone there?

  • shardwick
    Replied on September 16, 2015 at 2:02 AM

    Also, the lines are still there whe you go to get a PDF of the document.

    We are using hard copies first and then using them online later. Is there no way it can look nice on one piece of paper?

    Can you please fix the logo?

  • Charlie
    Replied on September 16, 2015 at 4:59 AM

    I edited the "top" value of the CSS in your form, here's your form: http://form.jotform.us/form/52578680494166?, titled "Clone of POPCS Cafeteria Committee Food Service Form (clone version)".

    If you want to add the image just above on another one, I would like to suggest editing the image using software like "Paint" or Adobe Photoshop. Positioning the image on another would work using CSS but I believe it won't be that responsive, which means when the form is viewed on a device with a different screen size, the images may moved on a different position. Here's what I meant:

    Removing the space at the top of the form Image 1 Screenshot 20

     

    The simpler solution for it is to edit the image and copy and paste the "POPCS" logo to the "Prince of Peace Christian School". Save them as one image file, and use that instead.

     

    For the PDF version or hard copy of the form, please refer to this link instead: www.jotform.com/answers/663110. I have responded to your concern there.

    I hope that helps.

  • shardwick
    Replied on September 17, 2015 at 10:21 AM

    http://www.jotform.com//?formID=52593270943157#

     

    Can someone please help me remove the lines on this page when going to print? They don't show until you go to print. Please. please please.

    Why won't your tech support help anymore?????

  • Charlie
    Replied on September 17, 2015 at 11:42 AM

    @shardwick

    We'll be replying to the other thread here: http://www.jotform.com/answers/663110. Apologies for the delay, we provide support 24/7, please do allow us a couple of hours to response back.

    Thank you for understanding.