Hide An Element On Mobile

Hi there,

select the Spacer Block in the editor, and go to Advanced > Additional CSS Class(es) and add: hide-on-mobile

More info on the GP hide-in-* classes here:

https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

Amazing, thank you so much. This works perfectly!

Can I do something similar to hide a header image - across all types of devices? I was going to add one on for SEO purposes so that it shows up with the image I've selected for Google search - but I don't actually want it to show on the page!

Thanks,
Ella

If you want you can add all three hide-on-* classes - copy and paste this:

hide-on-desktop hide-on-tablet hide-on-mobile

I'm unable to select the featured image to be able to add that into the classes as it goes on the right hand side of the editor within the "Page", so you can only add or remove the image, there isn't any other options for it. Can I add similar code into the page which specifies it's the featured image we want to remove on all devices? (If that makes sense?)

Thanks,
Ella

Ok, yeah you can use some CSS to hide them... but quick question, do you have an SEO plugin where you specify the image to be used in Search Results ? eg. Use the Featured Image for SERPS

Ooh great, thank you! I have Yoast but that only allows you to change it for social media - not google search :)

Ok, so by default Yoast will use the Image you select in the post / page editor Featured Image meta box for the Google search results.
And you can tell the Theme not to show it on the Front End by:

1. Customizer > Layout > Blog --> Featured Images panel
2. Select the Posts tab, and uncheck Display featured images
3. Repeat #2 for the Pages tab if thats required.

OR you can selectively disable the Featured Image on individual posts or pages using the Disable Element Meta Box in the post editor:

https://docs.generatepress.com/article/disable-elements-overview/

OR use a Layout Element if you want to do disable it for specific places eg. Posts of a specific category:

https://docs.generatepress.com/article/layout-element-overview/

Whatever method, as long as you set a Featured Image in the editor, you should see it in the Yoast rich snippet preview.

Brilliant, thanks for this! Doing it the first way via Customizer, where do I find the pages please? As I can only see blog then posts, I can't seem to see the pages?

The second way with Disable Elements only seems to show the 'content title' option for me, you see.

Thanks,
Ella

Do you not see this ?

https://www.screencast.com/t/cZlO4jeZO

The second way , first go to Appearance > GeneratePress and Activate the Disable Elements module.

Hi David, I have the same problem: I need to hide an element on mobile and tablet, and I inserted CSS on Block. It works, but on mobile and tablet there is a annoying space instead of block. Is possible to hide the whole element and not only the block?

Hi Luca,

To have a better understanding of the issue, may you start a new topic and provide the link to the site in question? Can you also point where we can see the Element?

You may use the private information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information