hide header element on mobile

Hi there,

Try adding hide-on-mobile class to the page hero that you want to hide on mobile:
https://docs.generatepress.com/article/header-element-overview/#element-classes
https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

Let me know if this helps :)

Hello,
the hide-on-mobile class works great for the one hero.

The other hero created will not show on any device. This is my code:

<div class="hide-on-desktop">
<a href="https://www.fluidall.com/awareness-month/" title="Breast Cancer Awareness"><img src="https://www.fluidall.com/wp-content/uploads/pink-ribbon-1-e1569617505540.png" alt="Breast Cancer Awareness" /><h2 style="font-size:30px;text-align: center;  margin: 0; vertical-align: middle;">Help us spread awareness during Breast Cancer Awareness month</h2></a>   
</div>

Can you offer any suggestions?

That code will need to be added in the same page hero.

Great, now I understand. I updated the one hero with (2) divs - one hide-on-mobile and one with hide-on-desktop. Works great! Thank you

No problem :)