Embedded Card Form not displaying correctly on mobile - height issue

  • Profile Image
    aaron.wolverton
    Asked on October 21, 2020 at 06:14 PM

    Hi, I'm trying to get rid of some of the whitespace on my jotform. The problem is when the page loads, the user is not able to see the yellow next and back buttons unless they scroll down. I am trying to get rid of some of that white space on my form so the entire form displays right when the page loads without scrolling down. How would I do this? Thanks so much

    1603318303_5f90b21f071f1_61A5C8FA-5B96-41603318302_5f90b21ecdcb2_48A9EADA-F451-4

    Screenshot
  • Profile Image
    Mike
    Answered on October 21, 2020 at 11:46 PM

    You can try embedding your form using the iframe code, and also adding the next HTML style tag to your web page. Where 202926695841162 represents the ID of your form.

    Example:

    <style>
    @media screen and (max-height: 640px) {
    #JotFormIFrame-
    202926695841162 {
    height: 500px !important;
    }
    }
    </style>

    7hy5l.png

  • Profile Image
    aaron.wolverton
    Answered on October 22, 2020 at 02:35 PM

    Thanks for the response Mike, and I am using the iFrame code already and embedding that on a click funnels landing page.

    However, when I edit the iFrame code I am embedding in my Click Funnels page, the white area does not change size. I feel like I would have to edit something within my Jotform account?

    Could you give me an idea on how to make that white box smaller?

    I'm terrible at tech so not sure if that's what you explained or not. Still not understanding

  • Profile Image
    Mike
    Answered on October 22, 2020 at 04:41 PM

    Unfortunately, there is no way to remove the whitespace in card layout forms within JotForm. There is not much we can do about the layout of the card forms. Classic layout forms are more customizable.

    You can try affecting the embedded form in your web page with a custom CSS. In this case, you will need to add the CSS to your website (see Click Funnels - Custom CSS).

    Check your form ID in JotForm:

    i5ihb.png

    Then, use it in the CSS that is added to Click Funnels. For example, if the form ID is 202926695841162, add the next CSS:

    @media screen and (max-height: 640px) {
    #JotFormIFrame-
    202926695841162 {
    height: 500px !important;
    }
    }