[Resolved] Why do I have a gap below the footer?

[Yolanda]

Hi support,

I don’t know what happend, but all of a sudden I have a huge gap below my footer.
I’ve checked this with a css inspector, but the only thing I see is HTML.
All settings for bottom are OK, I’ve checked that also.

What can be the reason of this gap?

Thank you!
Yolanda

[Leo]

Hi there,

Just checked the site and not seeing the issue:
https://www.screencast.com/t/wseZJdcOwrlE

Is it happening on a specific page?

[Yolanda]

The white gap below the article is caused by the long widget on the right, but below the footer there is huge gap, see https://www.screencast.com/t/JZRePsIcF2gL

[Leo]

I’m seeing some issues with your custom CSS.

Can you temporarily disable all of them for now and see if it fixes the issue?

[Yolanda]

Goodmorning,

I don’t know how to disable the custom css? I only use the extra css from the theme.
The css I have is (see below).

The gap is not on the blog/homepage, but only on the post pages.

For the postpages I’ve made an element to hide the posttitle,
https://i.postimg.cc/Dw16JXMy/Screenshot-23.jpg

What am I doing wrong?

.alignright { float: right; margin: 20px 0px 30px 40px; }
.alignleft { float: left; margin: 20px 40px 30px 0px; }

h1, h2, h3, h4, h5, h6 {display: inline-block;}

li {padding: 3px;} ul {padding: 3px;}

tr:nth-child(odd){background: #ffffff; }
tr:nth-child(even){background: #efe1cb;}

table, td { vertical-align: top; font-size: 13px; padding-left: 10px; border: none; }

th { font-size: 14px; padding: 20px; background: #B2792E; }

.metaslider .caption { position: absolute; background: black; color: white; }

.wp-caption {position:relative; padding:10px 5px 5px 10px; border:1px solid #e3e3e3; font-style: italic;}

.inside-header {
max-height: 154px;}
.sidebar .widget a {
font-weight: bold;}
.widget ul li {
padding-bottom: 8px;
}

[Yolanda]

What I see in the inspector is a high px for the height. But I have no idea how to change that….
Can you help out?

https://postimg.cc/gallery/1riamw2zu/

[David]

Hi there,

it looks like the issue is generated by the reCaptcha you have on your signup form. Can you try disabling that to see of that is the cause.

[Yolanda]

Hi David, I’ve disabled the recaptcha and reloaded everything. But it’s no difference, the gap is still there.
I have this site for 3 years now, and this week I changed the theme to GP. From that time (half way the building process) this gap appears. I never had it before.
Does the screenshots say anything I posted earlier? I see a 5000+px height, but have no idea where to find it.

[Leo]

I’m seeing this CSS which is casuing some issue:

.inside-header {
    max-height: 154px;
}

Can you remove that first?

To temporarily disable CSS, you can use the comment system:
/* CSS between this would be disabled */

[Yolanda]

I’ve done that, but that only changes the height of the header, which is suppose to.

For now I’ve been struggling with this issue for days, and I have no clue at all.
When I check my browser inspector I do see this huge high paddings of 5000+ and 7000+ pixels. It’s different per page and post.

I know CSS, and I’ve been building sites for 15+ years now with wordpress, but I’ve never seen this before.
And it started with this new theme, which I love by the way!

Can you give me some more thoughts please? If not, I just have to leave it as it is.

[David]

Something odd with your site logo – could you remove the logo from the Customizer > Site Identity ?

[Yolanda]

Yes, that was the trick!! You are my hero!!

I know what I’ve done wrong now: I have been struggling with the header and background. I wanted to repeat-x the logo, but that didn’t work. So I installed it as a background with a repeat. To set the height of the header to show the background, I’ve uploaded a 1px image with 240 height. But apparently that was repeated over and over again.

I’ve removed the background now and uploaded the banner with 100% fill size.
I changed the header paddings to get the text (site description) in the center/center. (Is that correct?)
The site looks OK now!

And how do I use / can you give some examples of the field position left top, x% y%, xpos ypos (px) at the Background images > Header?

[David]

Glad to hear that 🙂

I changed the header paddings to get the text (site description) in the center/center. (Is that correct?)

Thats correct.

So the position field you can add ONE of these three options:
1. Text: left top
2. Percentages: 0% 0%
3. Pixels: 0px 0px

They all do the same thing and will position the image from its top left hand corner.
More information here:

https://www.w3schools.com/cssref/pr_background-position.asp

[Yolanda]

I see, thank you again!

[David]

You’re welcome

[Author]

Posts