2 column page hero

Hi there,

do you have this setup on a page? If so can you point me to it

Hi David

I'm working in a staging environment which requires a login/password to access. Can I send you these privately?

I have managed to get this

[img]https://i.imgur.com/ojojZ0r.png[/img]

by modifying one of the example page heros. How do I get the content container to stretch the full height of the banner?

Thanks,
Helen

You can send them via the Account Issue form here:

https://generatepress.com/contact/

Please add the URL of this topic to the form so we can easily track.

Hi David,

I've sent the details via the form. You can see the hero I'm working on on the front page.

My ideal solution would be to have two columns, with the image on one side, not as a background of the whole banner. Also ideal would be having the purple block sit below the image when viewed on mobile.

Thanks for your help,
Helen

The URL is: https://staging1.courses.idas.org.uk

! :-)

Thanks got that - but i am not seeing the same as the image depicted above. The background is different and their is no purple background?

If you could add the code as per your original topic with the image in a column, and remove all the padding from the hero, i can look at what CSS is needed to make it happen ( or an alternative method )

Hi David

I have created a test page with a section including my original code. You can view it here: https://staging1.courses.idas.org.uk/test/

Thanks,
Helen

Cool - ok slight change of plan, lets take LGC out of the equation. Instead add your content within this markup:

<div class="section-col">
    <div class="section-col-inner">
        <h1>Heading</h1>
        <p>Sub heading text</p>
    </div>
</div>
<div class="section-col col-image">
    <img src="URL" alt="alt-text" width="100%" height="auto">
</div>

Maker sure theres no <br> tags before or after the image.

Can you also give that a section a Custom Class ( in settings ) of: section-row

Then i can start some CSS work :)

OK, I've done this.

So give this a shot - i have commented so you can see what its doing :)

.section-row .generate-sections-inside-container, .section-row .section-col {
    padding: 0; /* removes horizontal padding of section */
    display: flex;
}

/* Vertically center columns content */
.section-col {
    flex-direction: column;
    justify-content: center;
}

/* Set the minimum width of the first column */
.section-row .section-col:first-child {
    flex: 0 0 33%;
    min-width: 320px;
}

/* adjust spacing around Title and text content */
.section-row .section-col-inner {
    margin: 10%; 
}

/* Force the image to cover the column */
.section-row .col-image img {
    vertical-align: middle;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Sets breakpoint for mobile staacking */
@media (max-width: 768px) {
    .section-row .generate-sections-inside-container {
        flex-direction: column-reverse ;
    }
    .section-col {
        flex: 1 0 100%;
    }
}

/* Makes the H1 responsive on desktop */
@media (min-width: 769px) {
    .section-row .section-col h1 {
        font-size: 5vw;
    }
}

That's brilliant. Thank you! :-) Have a great weekend.

Awesome - that works really well :)

Hi David

I don't know if this is related to the fix above, but now when I create new page heros the text in the hero is aligned right despite me specifying horizontal alignment to be centered.

When I look at the code it seems to be this bit that is causing the issue because when I remove display: grid, the text displays centrally.

.inside-page-hero {
display: -ms-grid;
display: grid;
grid-template-areas: "left right";
-ms-grid-columns: 50% 50%;
grid-template-columns: 50% 50%;
}

That CSS is not related. But it is Custom CSS ( ie. not the standard ). If you don't require 2 columns in your page heroes then you can remove it.