[Resolved] 2 column page hero

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 )

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 🙂

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

Awesome – that works really well 🙂

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.