Blank space above the featured post on the homepage

Hello,

You should either disable Page Hero for the front page or simply minimize the percentage of the 'white space' as right now it stands at 16% of it's height.

Navigate to Appearance / Elements & find you home-page hero element.

This is the CSS currently that is displaying the white space:

.page-hero {
padding-top: 16%;
}

Thank you @Dorian,

Yes, the padding-top: 16% was added based on the feedback from @David here to fix the image background inside the container for (single) posts only and not the homepage:

https://generatepress.com/forums/topic/the-featured-image-for-a-single-article-is-resizing-on-different-screen-sizes/#post-1654135

If I reduced the padding-top: to 0% for example, the home page will be fixed, however, the feature image for a single article in the container will get broken.

Any idea how to fix both (homepage + single post)?

Thank You!

Please check here: https://charbelnemnom.com/

And then check here: https://charbelnemnom.com/backup-best-practices-in-action-the-backup-bible-complete-edition/

Hi there,

you have this CSS that is adding top margin to the Hero element:

.page-hero {
    margin-top: 30px;
}

If you want to keep that space on the single post but remove it on the homepage then change it to:

body:not(.home) .page-hero {
    margin-top: 30px;
}

Thank you @David for your kind support,

Please note that I have changed it to

body:not(.home) .page-hero {
    margin-top: 30px;
}

keep the space on the single post but remove it on the homepage and then I cleared my cache. I still can see the big space on the homepage, it was reduced a bit only.

Could you please check? I tried with Google Chrome and Edge browser.

Thank You!

I am not seeing any space before the featured post ( header element ) - i am occasionally seeing large space below that - before the post grid... which is coming from an Advert

Thank you @David,

The big space before the featured post on the home page is showing only a big screen like 27" only.
I tried on 24" and 15", the featured post is attached directly to the Black Menu.

I think because of this one that you told me to use for the background image inside the container for a single post:

@media(min-width: 1600px) {
.page-hero {
padding-top: 16%;
}
}

Could you please advise?

From the Advert, you are right is below the featured post.

Ok so you dont need the padding on the home page as thats whats causing the issue - so just use this CSS:

@media(min-width: 1600px) {
    body:not(.home) .page-hero {
        padding-top: 16%;
    }
}

Thank you @David, much appreciated!

I revert back to the page-hero CSS with 30px.

.page-hero {
	margin-top: 30px;
}

And updated the media without the padding on the home page.

@media(min-width: 1600px) {
    body:not(.home) .page-hero {
        padding-top: 16%;
    }
}

It's working great.

Many Thanks David!!!

-Charbel

Glad to be of help.

Hello @David,

Hope you are doing well.

Sorry, I want to come back to this issue please.

I have noticed that the author page is not well sized on big screens (27").

https://charbelnemnom.com/author/charbel-nemnom/

I have noticed a large black space above the author-page (profile) under the Main Menu.
This is related to the image padding size that we updated using the CSS code above.
How can we exclude the author page from this please?

Thank You!

You would change the CSS selector ie. this:

body:not(.home) .page-hero

to:

body:not(.home):not(.author) .page-hero

Thank You @David for your quick response as usual, much appreciated!

The issue is resolved for the author page.

You're welcome