Archived topic
Question about creating a page hero
3 replies · Started by Kemo on October 11, 2019
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
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.
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!
You're welcome :)
