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

  • Profile Image
    scany
    Asked on December 23, 2015 at 04: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?
  • Profile Image
    Ben
    Answered on December 23, 2015 at 04: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. :)

  • Profile Image
    scany
    Answered on December 23, 2015 at 04: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?

  • Profile Image
    Ben
    Answered on December 23, 2015 at 04: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.

  • Profile Image
    scany
    Answered on December 23, 2015 at 04:54 PM

     

    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).

  • Profile Image
    Ben
    Answered on December 23, 2015 at 05: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.

  • Profile Image
    scanyevents
    Answered on December 23, 2015 at 05: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%;
    }
    }

  • Profile Image
    Ben
    Answered on December 23, 2015 at 05: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.

  • Profile Image
    scany
    Answered on December 23, 2015 at 05: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!!

  • Profile Image
    Kevin_G
    Answered on December 23, 2015 at 05: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.

  • Profile Image
    scany
    Answered 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?

  • Profile Image
    BJoanna
    Answered on December 24, 2015 at 01: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. 

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