Hero Image & Text Alignment

Hi there,

do you use the Block Editor ? As this could be done using a Block Element.
If not let me know as it will require some HTML and CSS

No, I don't use the block editor, just the classic.

Thanks,

Ok - you need to add some HTML around the image, text and form to create some columns:

eg.

<div class="hero-row">
    <div class="hero-col one">
        Your Image HTML Here
    </div>
    <div class="hero-col two">
        Your text and Form HTML here
    </div>    
</div>

If you can add that then i can provide the CSS to position stuff.

I've added that...

Try adding this CSS:

@media(min-width: 768px) {
    .hero-row {
        max-width: 800px;
        margin: auto;
        padding: 0 20px;
        display: flex;
        align-items: center;
    }
    .hero-row .hero-col.one {
        margin-right: 40px;
    }
    .hero-row .hero-col.two {
        flex: 1;
    } 
}

That's worked - thank you!

Glad to be of help!