Archived topic
Page Hero Problem
3 replies · Started by Hans on March 22, 2019
Viewing posts 1–4 of 4
I am very unexperienced with page hero. I studied your example three and tried to build a page. I want thave 2 columns and 2 rows. In the upper grid left I want to show the first box. That's okay. The second box should beplace in second row und second column at the bottom. I did not succeed neither moving to secfong row nor to the bottom. Could you please give an advice how to manage it.
Hi there,
To create 2 columns and 2 rows in the page hero, try this for your HTML:
<div class="page-hero-columns">
<div class="page-hero-section-1">
Row 1 left Content
</div>
<div class="page-hero-section-2">
Row 1 right content
</div>
</div>
<div class="page-hero-columns">
<div class="page-hero-section-1">
Row 2 left Content
</div>
<div class="page-hero-section-2">
Row 2 right content
</div>
</div>And this for your CSS:
.page-hero-columns {
display: flex;
}
.page-hero-columns > div {
width: 50%;
}
@media (max-width: 768px) {
.page-hero-columns > div {
width: 100%;
}
}The idea comes from this:
https://docs.generatepress.com/article/split-header-three-sections/
Hi Leo,
thanks for your advice!
No problem :)
This archived topic is closed to new replies.
