How to permanently remove unwanted white space at top of WordPress page?

Other Questions Wordpress
1

I have an annoying white space showing up at the top of my WordPress website. After checking the browser inspector, I found that removing this specific HTML element makes the white bar disappear:

<section class="wp-block wp-block-7b2a4f1 full-width d-flex block-container" data-block="7b2a4f1" data-type="section" data-config='{"width":"full","display":"flex"}' data-version="v2.1.4">
</section>

The problem is when I delete the classes full-width d-flex block-container or the entire element through inspect tool, the white bar goes away. But I need to fix this issue permanently in my WordPress code. I have identified the problematic element but I am not sure how to properly remove it from my theme files without breaking anything else. What is the best way to eliminate this white space issue for good?

2

The HTML element causing your issue is likely from a page builder plugin rather than your theme files. Instead of searching through your theme code, you can effectively hide it using CSS. Navigate to Appearance > Customize > Additional CSS and insert the following code:

[data-block="7b2a4f1"] {
    display: none !important;
}

This will effectively eliminate that specific block and resolve the white space problem. Alternatively, you could directly delete the empty section from your page builder, but using CSS is usually safer as it remains intact through theme updates.

3

yep, it could be an empty block causing that space. just go to your page builder, like elementor or gutenberg, and delete the section. much easier than tinkering with CSS or code, believe me!

4

I’ve had this exact problem before - it’s usually padding or margin settings on that section. Don’t hide it with CSS yet. First, check if the section has custom spacing. Go to your WordPress admin, edit the page, and find that empty section in your editor. Look for excessive top/bottom padding or margin values creating the space. Just set those spacing values to zero - that usually fixes it without deleting the whole block. If you’re using Elementor, you’ll find these spacing controls in the Advanced tab of the section settings.