[Resolved] Page Hero Problem

Home Forums Support [Resolved] Page Hero Problem

Home Forums Support Page Hero Problem

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #846877
    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
    #846969
    Leo
    Staff
    Customer Support

    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/

    #847334
    Hans

    Hi Leo,

    thanks for your advice!

    #847606
    Leo
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.