Archived topic
Responsive page hero layout
3 replies · Started by Bas on December 14, 2019
Viewing posts 1–4 of 4
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.
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%;
}
}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 :)
You're welcome
This archived topic is closed to new replies.
