[Resolved] Blank space above the featured post on the homepage

Home Forums Support [Resolved] Blank space above the featured post on the homepage

Home Forums Support Blank space above the featured post on the homepage

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1653995
    Charbel

    Hello @David,

    I have recently noticed that I can see blank space above the featured post on the homepage only.

    https://charbelnemnom.com

    Could you please advise what could be the root cause?

    Thank You!

    #1654090
    dorian

    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%;
    }

    #1654163
    Charbel

    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!

    #1654167
    Charbel
    #1654289
    David
    Staff
    Customer Support

    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;
    }
    #1654309
    Charbel

    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!

    #1654321
    David
    Staff
    Customer Support

    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

    #1654566
    Charbel

    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.

    #1654637
    David
    Staff
    Customer Support

    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%;
        }
    }
    #1654653
    Charbel

    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

    #1654791
    David
    Staff
    Customer Support
    #1676823
    Charbel

    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!

    #1676951
    David
    Staff
    Customer Support

    You would change the CSS selector ie. this:

    body:not(.home) .page-hero

    to:

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

    #1677024
    Charbel

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

    The issue is resolved for the author page.

    #1677099
    David
    Staff
    Customer Support
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.