[Resolved] Fullscreen Header Element Layout Question

[indiecloud]

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!!

[Leo]

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 🙂

[indiecloud]

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.

[indiecloud]

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)

Say Hello!
See Services

[David]

Hi there,

so the DIVs will stack by default so you only need to tell it to flex on desktop like so:

@media (min-width: 769px) {
    .header-section {
        display: flex;
    }   
    .header-section>div {
        width: 50%;
        padding: 20px
    }
}

May want to add some bottom margin to the DIVs for when they stack.

Note: When adding code to the forum, select it and click the Code button. I edited the topic and updated it.

[indiecloud]

Hello David,

Yes that helped! This is what my CSS Code looked like in the end. Let me know if you feel there are any issues with it.

.header-section > div {
    width: 100%;
margin-top: 40px;
text-align: left;
}

@media (min-width: 769px) {
    .header-section {
        display: flex;
    }   
    .header-section>div {
        width: 100%;
    padding: 20px;
        
    }
}

Thanks!

[David]

Well it looks like its working – so all good for me 🙂

[Author]

Posts