[Resolved] Fullscreen Header Element Layout Question

Home Forums Support Fullscreen Header Element Layout Question

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1025576
    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!!

    #1025584
    Leo
    Staff
    Customer Support

    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 🙂

    #1026532
    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.

    #1026536
    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)

    Pixel art of storefront
    #1026557
    David
    Staff
    Customer Support

    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.

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

    #1029747
    David
    Staff
    Customer Support

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

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.