[Resolved] 2 column page hero

Home Forums Support [Resolved] 2 column page hero

Home Forums Support 2 column page hero

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #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;”]
    Woman listening at a training event
    [/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

    GeneratePress 2.2.2
    GP Premium 1.7.8
    #831917
    David
    Staff
    Customer Support

    Hi there,

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

    #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

    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

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

    #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

    #831962
    Helen
    #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 )

    #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

    #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 🙂

    #832791
    Helen

    OK, I’ve done this.

    #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;
        }
    }
    #832962
    Helen

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

    #833001
    David
    Staff
    Customer Support

    Awesome – that works really well 🙂

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

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

Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.