Show Different Hero Header on Mobile Phones?

I would also like to be able to use the header (hero) as a call to action that is linked to another page. Is this possible?

Hi there,

unfortunately its not that simple.
What we could do instead is incorporate the Mobile and Desktop versions in one header element and use CSS to display them accordingly.

Do you have an example of your Desktop header element and how it would be displayed on Mobile?

I have tried various things to use the same header image for everything but when I added a full width image that was 630px high it got chopped off at the sides on mobiles.

I tried CSS to change the max height of the header on small screens to stop it from chopping off the sizes but couldn't get that working so I abandoned the idea.

After all, if it's not possible to make it hyperlinked to another page I will just leave it at that. As an alternative I have used a reusable (global) Gutenberg block instead at the top of the pages that wanted to use an Element on.

Thanks.

Martin

Do you have an example page with a Header Element i can take a look at? Maybe theres some alternative solution we can explore

The home page has a basic image element. When that is viewed on a mobile I want it to shrink to show the full image but it only shows the middle part.

https://woldswildlife.com

Thanks.

Are you not wanting any content in the page hero?

If so why not just use a featured image instead?

Then it would be responsive.

I was trying to have an image that was linked to another page.

Hence I chose to use blocks instead.

Thank you.

Martin

If there isn't going to be any content then you could remove the Header Element and just use the featured image.

Then we can use this filter to add a link to that image, the link you would add to a WordPress Custom Field:

add_filter( 'generate_single_featured_image_output', function( $output, $image_html ) {
    printf(
        '<div class="featured-image">
            <a href="%1$s">
                %2$s
            </a>
        </div>',
        get_post_meta( get_the_ID(), 'your_meta_title_custom_field', true );,
        $image_html
    );
}, 10, 2 );

Change this your_meta_title_custom_field in the code to match the name of your custom field.

hello, i am having an issue with this as well.
i am VERY new to this and am in desperate need of adding a page hero to my web page.
I want to add a SHOP NOW button so i followed the instructions on https://docs.generatepress.com/article/how-to-create-a-page-hero/. but it isnt showing properly on mobile.

Any chance you can open a new topic for your question?

Thanks :)

sure - where? lol

In this forum with the instruction here:
https://docs.generatepress.com/article/using-the-premium-support-forum/#open-support-topic

HI Leo ....

i opened up a new topic.... please let me know if you saw it :)

Nope I don't see it yet:
https://www.screencast.com/t/jF1EwlCg4Spf