[Resolved] Show Different Hero Header on Mobile Phones?

Home Forums Support [Resolved] Show Different Hero Header on Mobile Phones?

Home Forums Support Show Different Hero Header on Mobile Phones?

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #1288315
    Martin

    I have a hero header element that looks great on wide displays but I lose most of it when viewed on mobile screens. Is there a way to show one header element on desktops and tablets but a different one on smaller screens?

    Thanks.

    Martin

    #1288375
    Martin

    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?

    #1288721
    David
    Staff
    Customer Support

    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?

    #1288801
    Martin

    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

    #1288865
    David
    Staff
    Customer Support

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

    #1288955
    Martin

    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.

    #1289135
    Leo
    Staff
    Customer Support

    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.

    #1290332
    Martin

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

    Hence I chose to use blocks instead.

    Thank you.

    Martin

    #1290503
    David
    Staff
    Customer Support

    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.

    #1628099
    Carla

    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.

    #1628280
    Leo
    Staff
    Customer Support

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

    Thanks ๐Ÿ™‚

    #1628342
    Carla

    sure – where? lol

    #1628345
    Leo
    Staff
    Customer Support
    #1628358
    Carla

    HI Leo ….

    i opened up a new topic…. please let me know if you saw it ๐Ÿ™‚

    #1628363
    Leo
    Staff
    Customer Support

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

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