[Resolved] Responsive page hero layout

Home Forums Support Responsive page hero layout

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1104296
    Bas

    Hi support team,

    I’ve looked at the page hero examples in the documentation but it is not quite what I’m after.

    Are you willing to provide the code for a responsive page hero like the image below?
    Just some text with a button on the left and an image on the right.

    Thanks and have a good day.

    page hero example

    #1104306
    David
    Staff
    Customer Support

    Hi there,

    based on your current site Hero content you could use this HTML and CSS to create a simple 2 column grid for desktop:

    <div class="hero-grid">
        <div class="hero-column">
            <h1 class="hero-title"><span class="hero-title-black">Fast Websites</span><span class="hero-title-blue"> Make
                    More Money</span></h1>
            <p class="hero-text">Keeping your website speedy and mobile-friendly is crucial. If you fail, you turn away
                potential customers and send them straight to your competitors</p>
            <div class="hero-buttons"> <a href="#" class="button">Button 1</a> <a href="#" class="button">Button 2</a></div>
        </div>
        <div class="hero-column"><img src="image_url" alt="alt-text"></div>
    </div>
    @media (min-width: 769px) {
        .hero-grid {
            display: grid;
            grid-template-columns: 50% 50%;
        }
    }
    #1104334
    Bas

    Thanks for the fast response David.

    Your code is a great starter. Just what I was looking for. It needs some more styling but I’m sure I can figure that out.

    Thanks for helping out 🙂

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