[Support request] How to position Hero H1 template tag vertical top with mobile responsive image

Home Forums Support How to position Hero H1 template tag vertical top with mobile responsive image

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1077114
    Kevin Polley

    I have used the following CSS to make the background image responsive for a specific page

    @media (max-width: 768px) {
        .page-id-xx .page-hero {
            background-image: url(http://MOBILE-BACKGROUND-IMAGE-HERE);
        }
    }

    Using this causes the {{post_title}} template tag when wrapped in H1 tags to align to the bottom of the page hero container.

    The code I have used in the element is

    <div class="page-hero-h1">
    <h1>
    	{{post_title}}
    </h1>
    </div>

    What CSS do I need to use to get the post_title to appear at (or near) the top of the page hero.

    #1077131
    Leo
    Staff
    Customer Support

    Hi there,

    The page hero content position is determined by the padding:
    https://docs.generatepress.com/article/how-to-create-a-page-hero/#step-5-position-the-content

    So if you set the top padding to be 0 and bottom padding to be 200px, then the content would be on top.

    Let me know if this helps 🙂

    #1078246
    Kevin Polley

    When I set bottom padding to 200 the hero image increases in size to accommodate.

    What I’d like to do is simply move {{post_title}} up without the image changing in size.

    Is that possible?

    #1078287
    Leo
    Staff
    Customer Support

    I’m not sure if I understand.

    Try removing margin-bottom: 200px; from your CSS here:

    .page-hero-h1 h1 {
        font-size: 50px;
        font-weight: 500;
        color: #fff;
        background-color: rgba(2, 2, 79, 0.5);
        margin-bottom: 200px;
    }

    Then instead of setting the top padding to 31%:
    https://www.screencast.com/t/b5o71fLQjxF6

    Try setting that to 0 and the bottom padding to 31%.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.