How to remove hook element on mobile devices

Hi there,

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

Hi Leo,
thank you very much. This is pretty much how I did it. Usually, I try to avoid display:none; and prefer to remove unwanted code using PHP. But this is not really possible with media queries, since the server does not know anything about the device.

Thanks again,

Mike

Hi Mike,

You can try using wp_is_mobile() condition for the Hook element.
https://developer.wordpress.org/reference/functions/wp_is_mobile/

Filter the display rule using this filter -
https://docs.generatepress.com/article/generate_element_display/

Example:

add_filter( 'generate_element_display', function( $display, $element_id ) {
    if ( 123 === $element_id && wp_is_mobile() ) {
        $display = false;
    }

    return $display;
}, 10, 2 );

But this is quite limited. I may work on some devices but not others as the function is pretty old. It may be worth adding more User agents.

Here's a loose copy of this - https://gist.github.com/ejcabquina/4790ff39a976610f2c1e2056a6bb8841
I don't know all the UA strings but if you can get all and add them in, it should work for most.

Thanks, Leo. This is an interesting approach. Will give it a try. Might be a bit risky though for elements that could break the layout. Didn't know the generate_element_display. This is really a powerful feature. Thanks for pointing me in this direction. There is so much to learn about Generatepress, and it is always great fun. Besides, the documentation is absolutely fantastic. Great job!

Glad to hear!