Archived topic

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

3 replies · Started by Kevin Polley on November 25, 2019

Viewing posts 1–4 of 4

November 25, 2019 at 3:58 pm #1077114

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.

November 25, 2019 at 4:22 pm #1077131

Hi there,

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 :)

November 26, 2019 at 9:03 am #1078246

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?

November 26, 2019 at 9:33 am #1078287

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

This archived topic is closed to new replies.