[Resolved] How to remove header hero text on mobile?

[Hannah]

Is there a way to edit the header elements to display differently on mobile?

I’ve made the text bigger for desktop but would like it to not be shown on mobile on the home page, and to be smaller on the other pages.

I’d also like to set my image so it ‘zooms out’ and only uses the top section of the page on mobile (keeping the image in proportion) rather than displaying a thin section of the image and trying to bulk out the rest with the background colour.
Hope that makes sense!

I’ve tried adding the @media code into the header text and looking at the rules for exclusions etc but haven’t found anything that’s working at the moment.

[Leo]

Hi there,

You can add the hide-on-mobile class to the page hero text:
https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

Let me know if this helps 🙂

[Hannah]

That works, thank you!

[Leo]

No problem 🙂

[Author]

Posts