[Resolved] Show Different Hero Header on Mobile Phones?

Home Forums Support Show Different Hero Header on Mobile Phones?

This topic contains 8 replies, has 3 voices, and was last updated by  David 1 week, 3 days ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #1288315


    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?





    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?


    David 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?



    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.




    David 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



    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.




    Leo 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.



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

    Hence I chose to use blocks instead.

    Thank you.



    David 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 ) {
            '<div class="featured-image">
                <a href="%1$s">
            get_post_meta( get_the_ID(), 'your_meta_title_custom_field', true );,
    }, 10, 2 );

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

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.