[Resolved] Question about creating a page hero

Home Forums Support Question about creating a page hero

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1031949
    Kemo

    I’m working on a simple Page Hero for my site, you can see it in action here — https://ministryofjapan.com/

    I’ve been following your examples here – https://docs.generatepress.com/article/page-hero-examples/

    This is the code I’m using right now:

    header:

    <a class="hero-click" href="https://ministryofjapan.com/geisha/what-does-it-mean-to-be-a-geisha-who-is-a-geisha/">
    	<!-- optional html content. background is clickable without it -->
    		<div class="hero-content">
    			<h1>
    				The Shocking Truth Behind Japan's Geishas
    			</h1>
    		</div>
    </a>

    CSS:

    /*hero styling*/
    .page-hero {
    	min-height:70vh;
    }
    .hero-click {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
    .hero-content {
    	padding:50px 50px 30px 50px;
    	margin-top:30vh;
    	margin-left:10vw;
    	margin-right:10vw;
    	background-color:#fff;
    }

    I was wondering if it would be possible to make this more responsive – I have trouble with displaying this on small phone screens. Would it be somehow possible to move the .hero-content below the background image on mobile?

    I’ve seen it solved this way on other sites like here: https://imgur.com/a/0LfnVFs

    thanks

    #1032193
    David
    Staff
    Customer Support

    Hi there,

    as the image is a background its not possible ( or easy ) to move the image above the content. You can try this CSS which will move the hero content to the bottom of the header element:

    .page-hero {
        position: relative;
    }
    
    @media (max-width: 768px) {
        .hero-content {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            margin-left: 0;
            margin-right: 0;
            padding: 10px 30px;
        }
    }

    This will also fix the issue where your <a> tag is covering the entire browser screen.

    #1032199
    Kemo

    wow, this is great. I didn’t think about setting the position of this element as absolute… thanks for the fix on .page-hero too.

    great support as always!

    #1032303
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.