How to remove sidebar for mobile and tablet

Hi there,

WP has the the wp_is_mobile() conditional tag – which you can read more about here:

https://developer.www.ads-software.com/reference/functions/wp_is_mobile/

And you can use that with the GP generate_sidebar_layout filter hook to set the no-sidebar if it returns. And heres a PHP Snippet to do that:

add_filter( 'generate_sidebar_layout', function( $layout ) {
    // If wp_is_mobile() is true
    if ( wp_is_mobile() ) {
        return 'no-sidebar';
    }

    // Or else, set the regular layout
    return $layout;
 } );

NOTES:
wp_is_mobile() is a core function, it uses limited client data to determine if its a mobile device.
Page Caching on a site will require separate caches for Mobile and Desktop. Otherwise the wrong result could be cached. eg. Sidebars on Mobile, no Sidebars on Desktop.

As a general note CSS is the more reliable method.

Can you share the CSS to remove sidebar for mobile and tablet.
Thank you.

Hi @kashifbaloch12,

Here’s a CSS you can try:

@media(max-width: 1024px) {
    div.sidebar {
        display:none !important;
    }
}

It worked for mobile, but for tablet, the sidebar isn’t showing but there’s still empty space.

Hi @kashifbaloch12

Can you link us to your site so we can see the issue?

Sure, here’s the link.

Hum.. I’m not seeing a sidebar or empty space for tablet:

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

Open one of the post please.

Try adding this CSS instead:

@media(max-width: 1024px) {
    #right-sidebar {
        display: none;
    }
    #primary {
        width: 100%;
    }
}