[Resolved] Question about creating a page hero

[Kemo]

I’m working on a simple Page Hero for my site, you can see it in action here — https://ministryofjapan.com/

I’ve been following your examples here – https://docs.generatepress.com/article/page-hero-examples/

This is the code I’m using right now:

header:

<a class="hero-click" href="https://ministryofjapan.com/geisha/what-does-it-mean-to-be-a-geisha-who-is-a-geisha/">
	<!-- optional html content. background is clickable without it -->
		<div class="hero-content">
			<h1>
				The Shocking Truth Behind Japan's Geishas
			</h1>
		</div>
</a>

CSS:

/*hero styling*/
.page-hero {
	min-height:70vh;
}
.hero-click {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.hero-content {
	padding:50px 50px 30px 50px;
	margin-top:30vh;
	margin-left:10vw;
	margin-right:10vw;
	background-color:#fff;
}

I was wondering if it would be possible to make this more responsive – I have trouble with displaying this on small phone screens. Would it be somehow possible to move the .hero-content below the background image on mobile?

I’ve seen it solved this way on other sites like here: https://imgur.com/a/0LfnVFs

thanks

[David]

Hi there,

as the image is a background its not possible ( or easy ) to move the image above the content. You can try this CSS which will move the hero content to the bottom of the header element:

.page-hero {
    position: relative;
}

@media (max-width: 768px) {
    .hero-content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin-left: 0;
        margin-right: 0;
        padding: 10px 30px;
    }
}

This will also fix the issue where your <a> tag is covering the entire browser screen.

[Kemo]

wow, this is great. I didn’t think about setting the position of this element as absolute… thanks for the fix on .page-hero too.

great support as always!

[David]

You’re welcome 🙂

[Author]

Posts