How to remove the whitespace at the top of the form?

  • scany
    Asked on December 23, 2015 at 4:02 PM
    1. How do I eliminate the white background space in the form?  Either get rid of it or make it the same color as the form?
  • Ben
    Replied on December 23, 2015 at 4:27 PM

    Next to the code that was given on the previous thread, you should also add this code to your form:

    @media screen and (max-width:601px) and (min-width:599px) {
    form.jotform-form {
        padding: 0;
    }
    div.form-all {
        border-radius: 0;
    }
    }

    This new code will make the white at the bottom and the top gone and the corners will not show white.

    Do let us know if there are any additional details that should be changed and we would be happy to assist with the same. :)

  • scany
    Replied on December 23, 2015 at 4:33 PM

    Hi Ben - this eliminated the white space on the desktop view, but the white background still appears slightly at the corners on the iPhone.  Is there a way to fix for both displays?

  • Ben
    Replied on December 23, 2015 at 4:40 PM

    Can you please tell us what iPhone do you have so that we can check the resolution on it and also to give us a screenshot, to be able to see if we can recreate the same.

    This would allow us to give you proper code to fix this.

  • scany
    Replied on December 23, 2015 at 4:54 PM

    How to remove the whitespace at the top of the form? Image 1 Screenshot 20

     

    iPhone 6S Plus with Safari browser.  See the top left/right corner of the form shows white.  Same for the bottom right and left corner of the form (though not in screenshot because it was below the fold).

  • Ben
    Replied on December 23, 2015 at 5:08 PM

    OK, I understand, you do not want to have those shown at all.

    I removed them on the desktop using this part of the code:

    div.form-all {
        border-radius: 0;
    }

    You can use it on your form outside of the media query (the previous CSS) and it should remove it for all sizes.

    Do let us know of course how it goes. If there are still any issues, I would try my colleague from iPhone department to check this out as well.

  • scanyevents
    Replied on December 23, 2015 at 5:12 PM

    Do I enter that code in the CSS area just before the other code I inserted, which was:

     

    @media screen and (max-width:601px) and (min-width:599px) {
    form.jotform-form {
        padding: 0;
    }
    div.form-all {
        border-radius: 0;
    }
    }
    @media screen and (max-width:601px) and (min-width:599px) {
    .form-sub-label-container {
        max-width: 49.6%;
        box-sizing: border-box;
    }
    li.form-line {
        min-width: 100%;
    }
    }

  • Ben
    Replied on December 23, 2015 at 5:26 PM

    No, feel free to add it under that (previously added) code, so just like this:

    div.form-all {
        border-radius: 0;
    }

    That will cause it to work for all sizes.

  • scany
    Replied on December 23, 2015 at 5:33 PM

    With this code change, I lost the "rounded corners" on the form, which is fine.  That fixed the white space issue - so thanks again for your help!!

  • Kevin Support Team Lead
    Replied on December 23, 2015 at 5:50 PM

    Hi,

    On behalf of our colleague Ben, you are welcome.

    Feel free to contact us anytime if you need more help or have more questions, we will be more than glad to assist you.

    Regards.

  • scany
    Replied on December 24, 2015 at 11:29 AM

    I did a little more testing and the fixes we implemented worked both on Chrome browser with Windows 10, iPhone iOS6 with Safari, but not on the desktop version of Internet Explorer Version 11 under Windows 10.  Please see below.  Is there a way to implement a fix that will also cover IE 11?

    How to remove the whitespace at the top of the form? Image 1 Screenshot 20

  • BJoanna
    Replied on December 24, 2015 at 1:19 PM

    Unfortunately I do not have Internet Explored 11 on my computer to test your embedded form, but from what I can see from a screenshot you provided and how your embedded form looks in Chrome, I think that width of the form is changed. Considering that width of your form is set to 100%, possible reason for this issue can be element in which your form is embedded. That element is iFrame of Wix website which is also set to 100%. You can try to set fixed value for width of that element e.g. 600px, to see if that will resolve your issue. 

    How to remove the whitespace at the top of the form? Image 1 Screenshot 20

    Hope this will help. Let us know if you need further assistance.