Archived topic
Fullscreen Header Element Layout Question
6 replies · Started by indiecloud on October 3, 2019
Hello.
I would like to create a full screen header similar to the https://mailchimp.com one. Essentially I would like to have:
Headline Text
Sub-headline Text
Two Buttons side by side
Small free floating illustrated image besides or underneath the text, that moves and scales according to the screen size.
Is this layout possible?
Thank you in advance!!
Hi there,
Definitely possible.
Are you having any specific issues?
You could try creating columns using similar method/HTML here:
https://docs.generatepress.com/article/split-header-three-sections/
Give it a shot and let me know if you get stuck :)
Hello Leo,
So I was able to create the layout I wanted on desktop but when I look at the mobile home page, the illustrated image, which I hoped would move underneath the text on the mobile version, just stays inline, squishing both elements (text & image).
How can I make it go underneath?
This is the HTML I have on the page:
<div class="header-section">
<div class="header-section-1">
<div class="page-hero-content">
<h1>
Commoda autem et incommoda in eo genere sunt
</h1>
<h2>
Faceres tu quidem, Torquate, haec omnia; Nunc ita separantur, ut disiuncta sint, quo nihil potest esse perversius.
</h2>
</div>
<div class="page-hero-buttons">
<a href="URL">Say Hello!</a>
<a href="URL">See Services</a>
</div>
</div>
<div class="header-section-2">
<img />
</div>
</div>
This is the CSS:
.header-section {
display: flex;
}
.header-section > div {
width: 50%;
padding: 20px
}
@media (max-width: 768px) {
.header-section > div {
width: 100%;
}
}Thanks in advance for your help.
Not sure why but the last message i sent converted the html. Under the H2 code is code for two buttons and then in the next section there is code for an image. Hopefully the below code shows. (altered urls)
