[Resolved] Responsive page hero layout

[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.

[David]

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

[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 🙂

[David]

You’re welcome

[Author]

Posts