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

Home Forums Support Getting rid of the empty space in a contained page hero image in mobile

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1351153
    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.

    #1351363
    David
    Staff
    Customer Support

    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;
        }
    }
    #1352389
    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?

    #1352450
    David
    Staff
    Customer Support

    Try:

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

    That worked awesome, thank you very much.

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