Mobile and Tablet pages showing unwanted blank white space after header

And now the name of my site is appearing in the header between the site logo and the main menu. Driving me crazy. It wasn’t there before but now it came out of nowhere. Help! ??

It is only showing up in the desktop rendering. I went to the theme (Astra) customizer for the global header and I don’t see anything but the site logo and the Primary menu so I don’t know where to go to get rid of the website name from the header.

Fixed the issue in the 2nd post by turning off the “Display site name” in the theme customizer. I don’t understand how that slide toggled on. Sorry for freaking out.

The issue in the original post remains outstanding.

It is coming from this CSS which is directly output:

/* Fix content padding */
.site-content {
    padding-top: 75px;
}
/* Fix content padding in mobile */
@media (max-width: 800px) {
    .site-content {
        padding-top: 175px;
    }
}
/* Fix content padding in mobile */
@media (max-width: 650px) {
    .site-content {
        padding-top: 200px;
    }
}

There also appear to be a few blank div’s there:

<div class="elementor-column elementor-col-33 ....

Since you are using Elementor, you should ask them at their support page.

https://www.ads-software.com/plugins/elementor/ or if using the Pro version at their website https://elementor.com/

Thanks for pointing me in the right direction. I will do that.

I messaged support for elementor, the astra theme and the developers of the plugin Mobile Menu which I am using to generate the current header and they all told me that it was not their CSS code that was adding the 3 padding areas of 75px, 17px and 200px. They all seem to say that something else is causing it. Not sure who to turn to as they all seem to be pointing the finger elsewhere. Any way to figure out which program is generating it? I disabled the elementor plugin, and the space was still there. I switched to other themes and the space was still there. When I deactivated the mobile menu plugin the space was still there with the theme header. I think I systematically tried to find the cause but so far am unable to figure it out. Thanks.

That should be “75px, 175px and 200px” above.

Try this:

Add this to the <em>bottom of the theme customizer CSS:

.site-content {
    padding-top: 0;
}
@media (max-width: 800px) {
    .site-content {
        padding-top: 0;
    }
}
@media (max-width: 650px) {
    .site-content {
        padding-top: 0;
    }
}

You may need to add !important, like this to each:

padding-top: 0 !important;

Note: you need to make sure you have cleared all server and local browser cache when making site edits. especially CSS.

You are not using a custom CSS plugin?

Thanks!

I am using the “Additional CSS” function in the astra theme to add snippets of CSS code.

I also use a plugin called Lightspeed Cache to clear cache but I am not sure if that does the job of clearing all server and browser cache as you suggest.

Let me try your suggestion and see what happens. Will return to report but let me know if I should be adding CSS code and clearing cache in a different way.

LiteSpeed Cache

I went to add the CSS code and found that I had added this earlier to create the sticky header within the astra theme. Is this the culprit and do I need to adjust it to get rid of the space?

/* Astra sticky header */
.main-header-bar {
    position: fixed;
    top: 0;
    width: 100%;
}
/* Fix content padding */
.site-content {
    padding-top: 75px;
}
/* Fix content padding in mobile */
@media (max-width: 800px) {
    .site-content {
        padding-top: 175px;
    }
}
/* Fix content padding in mobile */
@media (max-width: 650px) {
    .site-content {
        padding-top: 200px;
    }
}

I am afraid that the sticky header won’t work properly if i change the setting.

I changed the mobile content padding for the sticky header from:
175px to 0px @ 800px width
200px to 0px @ 650px width

That reduced the blank space on mobile a lot.

I left the 75px general content padding because I needed it on the desktop and tablet rendering, otherwise the content goes under the header.

But I don’t want it on the mobile render becuse I stll see a noticeable blank space. Any way to suppress that 75 px pad just on mobile and leave it in for desktop and tablet?

Thanks again.

It looks like this now.

/* Astra sticky header */
.main-header-bar {
    position: fixed;
    top: 0;
    width: 100%;
}
/* Fix content padding */
.site-content {
    padding-top: 75px;
}
/* Fix content padding in mobile */
@media (max-width: 800px) {
    .site-content {
        padding-top: 0px;
    }
}
/* Fix content padding in mobile */
@media (max-width: 650px) {
    .site-content {
        padding-top: 0px;
    }
}

Bumping to re-ask this question:

I changed the mobile content padding for the sticky header from:
175px to 0px @ 800px width
200px to 0px @ 650px width

That reduced the blank space on mobile a lot.

I left the 75px general content padding because I needed it on the desktop and tablet rendering, otherwise the content goes under the header.

But I don’t want it on the mobile render because I still see a noticeable blank space. Any way to suppress that 75 px pad just on mobile and leave it in for desktop and tablet?

Thanks again.`