CF7 – Huge space at the bottom of the form

[mrdplusd]

Hi,

my CF7 forms show a large free space at the bottom of the form. I don’t understand where it can come from. I have already tried corresponding solutions you provided to this problem in other posts here – but without success.

The forms look fine in the Cornerstone editor. The problems only appear in live view, both in Safari and Chrome as well as on the iPhone.

As you can see in the screenshot, I defined 1 rem padding on each side of the column. It looks good in the editor.

In the live view, a huge space is added at the end of the form.

The form can be found at www.klickexpert.de at the bottom of the page.

[tristup]

Hi Dennis,

Thanks for reaching out.
It seems that the corresponding left column height is the reason behind your issue, please check if any element is having padding which increases the height of that column. And as the columns are in equal height, the right-hand column takes the same height.
I have tried to check it by logging in, but unfortunately, the given credentials do not work. I would request you to reshare it once again if the above process does not help you to find the cause of your issue.

Thanks

[mrdplusd]

@tristup

left column height

Hi Tristup,

I rechecked the left column’s height. Unfortunately, this is not the problem.

[ruenel]

Hey Dennis,

Thanks for updating in! The space below the contact form is because of the default bottom margin of the form in the Ethos stack. In the Ethos stack style.css, we have this code:

form {
    margin: 0 0 2.15em;
}

To remove or reduce the bottom margin, simply modify the code above and set it to 0. You need to add modified CSS code into Pro > Theme Options > CSS.

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break.

Best Regards.