- This topic has 18 replies, 2 voices, and was last updated 3 years, 2 months ago by Leo.
-
AuthorPosts
-
May 17, 2020 at 3:20 am #1288315Martin
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
May 17, 2020 at 4:51 am #1288375MartinI 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?
May 17, 2020 at 7:57 am #1288721DavidStaffCustomer SupportHi 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?
May 17, 2020 at 8:51 am #1288801MartinI 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
May 17, 2020 at 9:45 am #1288865DavidStaffCustomer SupportDo you have an example page with a Header Element i can take a look at? Maybe theres some alternative solution we can explore
May 17, 2020 at 10:52 am #1288955MartinThe 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.
Thanks.
May 17, 2020 at 1:22 pm #1289135LeoStaffCustomer SupportAre you not wanting any content in the page hero?
If so why not just use a featured image instead?
Then it would be responsive.
May 18, 2020 at 8:01 am #1290332MartinI was trying to have an image that was linked to another page.
Hence I chose to use blocks instead.
Thank you.
Martin
May 18, 2020 at 9:54 am #1290503DavidStaffCustomer SupportIf 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.January 21, 2021 at 9:07 am #1628099Carlahello, 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.January 21, 2021 at 11:25 am #1628280LeoStaffCustomer SupportAny chance you can open a new topic for your question?
Thanks ๐
January 21, 2021 at 12:06 pm #1628342Carlasure – where? lol
January 21, 2021 at 12:08 pm #1628345LeoStaffCustomer SupportIn this forum with the instruction here:
https://docs.generatepress.com/article/using-the-premium-support-forum/#open-support-topicJanuary 21, 2021 at 12:13 pm #1628358CarlaHI Leo ….
i opened up a new topic…. please let me know if you saw it ๐
January 21, 2021 at 12:15 pm #1628363LeoStaffCustomer SupportNope I don’t see it yet:
https://www.screencast.com/t/jF1EwlCg4Spf -
AuthorPosts
- You must be logged in to reply to this topic.