2 column page hero – GeneratePress

This topic has 16 replies, 2 voices, and was last updated 6 years, 6 months ago by David.

Viewing 15 posts - 1 through 15 (of 17 total)

1 2 →

Author

Posts
March 7, 2019 at 6:20 am #831628

Helen

Hi,

Is it possible to achieve something like this: https://imgur.com/qi3PrY8 Where you have a page hero with 2 columns?

I’ve tried creating a section with a purple background colour and used the Lightweight Grid plugin to create the responsive columns, but I am getting padding around the image I put in the right hand column.

This is my code:

[lgc_column grid=”30″ tablet_grid=”40″ mobile_grid=”100″ last=”false” style=”padding-left:0px;”]
<h1>Understanding abuse & violence</h1>
Domestic abuse and sexual violence online courses and training events
[/lgc_column]

[lgc_column grid=”70″ tablet_grid=”60″ mobile_grid=”100″ last=”true” style=”padding-left:0px;”]

[/lgc_column]

Is there a better way of achieving the layout I want? Ideally, I’d like the purple block containing the text to move underneath the image on mobile.

Thanks,
Helen

March 7, 2019 at 8:56 am #831917

David
Staff
Customer Support

Hi there,

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

March 7, 2019 at 9:11 am #831929

Helen

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

March 7, 2019 at 9:19 am #831939

David
Staff
Customer Support

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.

March 7, 2019 at 9:42 am #831960

Helen

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

March 7, 2019 at 9:44 am #831962

Helen

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

! 🙂

March 7, 2019 at 10:10 am #831985

David
Staff
Customer Support

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 )

March 8, 2019 at 5:12 am #832707

Helen

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

March 8, 2019 at 5:58 am #832765
David
Staff
Customer Support
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 🙂
March 8, 2019 at 6:32 am #832791

Helen

OK, I’ve done this.

March 8, 2019 at 6:59 am #832918
David
Staff
Customer Support
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;
    }
}
```
March 8, 2019 at 7:37 am #832962

Helen

That’s brilliant. Thank you! 🙂 Have a great weekend.

March 8, 2019 at 8:07 am #833001

David
Staff
Customer Support

Awesome – that works really well 🙂

March 8, 2019 at 8:26 am #833027

Helen

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%;
}

March 8, 2019 at 8:29 am #833032

David
Staff
Customer Support

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.
Author

Posts

Viewing 15 posts - 1 through 15 (of 17 total)

1 2 →

You must be logged in to reply to this topic.

[Resolved] 2 column page hero

Popular Articles

Start building better websites today.