[Resolved] How to remove hook element on mobile devices

[mkjj]

Similar questions have been posted before, but I’m not sure if my solution is best practice. I created a hook element to show some content next to the logo. I have to remove this content on mobile devices. I did that by setting the wrapper DIV to display: none; in a media query. Would you consider this ok? Or would you recommend a better solution?

Thank you!

Mike

[Leo]

Hi there,

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

[mkjj]

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

[Elvin]

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.

[mkjj]

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!

[Leo]

Glad to hear!

[Author]

Posts