[Resolved] Hero Image & Text Alignment

[Claire]

Hi,

I’ve created a hero with an image, text and email sign up box. How do I get the text and signup box to the right hand side of the image? They are showing underneath at the moment.

Thank you,

[David]

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

[Claire]

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

Thanks,

[David]

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.

[Claire]

I’ve added that…

[David]

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

[Claire]

That’s worked – thank you!

[David]

Glad to be of help!

[Author]

Posts