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

[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.

[Leo]

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 🙂

[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?

[Leo]

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%.

[Author]

Posts