Unable to hide Page Hero on mobile

Hi Lori,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know :)

Hello! I put a link in the personal info box below. Thank you!

Hi Lori,

The page hero is hidden on mobile on my side:
https://www.screencast.com/t/oVzbDdqL

The CSS class is added correctly :)

Could you try to clear your browser cache? Or try on a new device.

Let me know.

I just tried it in incognito mode on mobile and you are right - it works! Thought I had cleared the cache but guess I didn't. Is there a way to have the feature image still show on mobile, just not the Page Hero?

Then you could try to uncheck the Disable Featured Image box in the header element, and use this CSS to hide the featured image on the desktop instead of disabling it completely:

@media (min-width: 769px) {
    .single-post .inside-article .featured-image {
        display:none;
    }
}

That worked! Thank you. And how do I get the title of the post to appear above the image on mobile as well?

Hi there,

That worked! Thank you. And how do I get the title of the post to appear above the image on mobile as well?

This is pretty tricky to do as the usage of {{post_title}} template tag on the Header Element disables the default title element so we basically don't have anything to display on mobile if you've hidden the whole page-hero.

But here's a workaround:

Try adding this PHP snippet so you can use [display_title] shortcode:

add_shortcode('display_title', function(){
return get_the_title();
});

Here's how to add PHP - https://docs.generatepress.com/article/adding-php/

After adding this PHP snippet, replace the template tag {{post_title}} on header element with the [display_title] shortcode.

Example, instead of this:

<h1> {{post_title}} </h1>

use this <h2> [display_title] </h2>

You then add this CSS so there's no double title display:

@media (min-width: 769px) {
    .single-post h1.entry-title {
    display: none;
}
}

@media (max-width: 768px) {
    .single-post h1.entry-title {
    display: block;
}
}

Thank you Elvin. I will give this a try. I read the documentation but I am wondering which php file do I add this snippet to:
add_shortcode('display_title', function(){
return get_the_title();
});

Would it be the single.php file? And where exactly within that text do I add the snippet? Sorry, I'm not super knowledgeable about code.

Also, in the header element template tag, if I put this: <h2> [display_title] </h2> does that mean the post on mobile will not have an h1 title? And if so, is that bad for SEO?

Thank you again.

Here's how to add PHP - https://docs.generatepress.com/article/adding-php/

So you either get a Code Snippets plugin or install a child theme for its functions.php. (don't use the parent theme's functions.php. it gets wiped on update)

Also, in the header element template tag, if I put this: <h2> [display_title] </h2> does that mean the post on mobile will not have an h1 title? And if so, is that bad for SEO?

There'd be duplicate H1 if you set the Header Element as well because when we replace template tag {{post_title}} with [display_title] the default h1.entry-title gets added back.

You'll basically have 2 h1 tags in this case if we keep the header element h1 as well and SEO plugins flag that as well.

Note: It's fine if the h1 isn't visible on the page. SEO only scans the page source. It doesn't actually check its CSS for any visibility:none;, opacity:0; or display:none;

Hi Elvin - sorry for my delay in responding but I couldn't work on my site for several days. I used the Code Snippets plugin and added the code and CSS code you mentioned above and that all worked, so thank you for that. When I used "<h2> [display_title] </h2>", the title was too small on the page hero element on desktop, so I used "<h1> [display_title] </h1>". Is that okay?

Hi Lori,

If you only have 1 title showing in this page, H1 is what you should be using.

Btw you can adjust the font size/family/weight at customzier > Typography> headings.

Hope it helps :)

Thanks Ying. I reread Elvin's response above and I guess making it h1 means I have 2 h1s which is not good. So I will adjust the h2 size for headings in the customizer instead. Thanks!

Have you fully sorted it out? No problem. :)

Yes, it's sorted - thank you for your help!