[Resolved] Getting rid of the empty space in a contained page hero image in mobile

[Joey]

I have an image on my page hero (https://simipress.com/home/) that is 762px x 1108, centered and set as “full page,” like the cover of a book. As it is too wide for the mobile, I contained it with this code to get the whole image on the phone:

.blog .page-hero {
    background-size: contain;
}

Is there a way to move the padding of the page hero up proportionally after 762px to get rid of the empty black space at the bottom of the image?

Here is what I am trying to do:

I know I can uncheck “full page” in the page hero, and then set the padding to 28%/28% on desktop and about 71%/71% on mobile, but then on tablet mode the page hero will no longer be full page. Is there a way to do this without that empty black space and keeping full page on desktop and mobile? Thanks in advance.

[David]

Hi there,

you can unset the Full Page at 500px ( where the empty space appears ) using this CSS:

@media(max-width: 500px) {
    .blog .page-hero {
        min-height: unset;
    }
}

[Joey]

Oh, so all GeneratePress is doing with full-page page heros is setting a minimum height. Thank you, it worked.

One last question, if you have time. If I want to put a margin around all posts, I know I can do this:

@media (max-width: 768px) {
 .blog, .archive {
        margin-left: 10px;
        margin-right: 10px;
    }
}

But how can I exclude the main navigation, footer bar, and page hero image?

[David]

Try:

@media (max-width: 768px) {
 .blog #page, .archive #page {
        margin-left: 10px;
        margin-right: 10px;
    }
}

[Joey]

That worked awesome, thank you very much.

[David]

You’re welcome

[Author]

Posts