[Resolved] Hero Image & Text Alignment

Home Forums Support [Resolved] Hero Image & Text Alignment

Home Forums Support Hero Image & Text Alignment

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #2075243
    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,

    #2075304
    David
    Staff
    Customer Support

    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

    #2075307
    Claire

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

    Thanks,

    #2075558
    David
    Staff
    Customer Support

    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.

    #2075561
    Claire

    I’ve added that…

    #2075583
    David
    Staff
    Customer Support

    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;
        } 
    }
    #2075609
    Claire

    That’s worked – thank you!

    #2075616
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.