[Resolved] Page Hero Problem

[Hans]

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.

GeneratePress 2.2.2

GP Premium 1.7.8

[Leo]

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/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Hans]

Hi Leo,

thanks for your advice!

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts