Embedded Card Form not displaying correctly on mobile - height issue

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

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>

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

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:

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;
}
}