How to Hide WordPress Widgets on Mobile Devices

Hide WordPress Widgets

A couple weeks ago I wrote about How to Hide WordPress Widgets on Specific Pages. Well now I am going to show you how to hide WordPress widgets on mobile devices. If you really want a great user experience for your readers then I highly suggest taking some to time to really look at your mobile layout. Most likely it is very cluttered. You can now easily fix that by following the tutorial below and hiding any WordPress widget you want on any device you want!

[alert-note]Example: I have two newsletter widgets on my site, one on the sidebar and one in the footer. There is no need to show both of them on mobile, it is more annoying than effective on such a small device. So I choose to hide the footer widget.[/alert-note]

Step 1

First, you will need to install a free WordPress plugin called Widget Options. It has over 50,000+ active installs with a 5 out of 5-star rating. There is both a free and premium version. You can hide things on mobile devices in the free version.

Widget Options WordPress plugin
Widget Options WordPress plugin

Step 2

After you have installed and activated the plugin, go into Appearance and click into “Widgets.”

Step 3

Go to your widget and you’ll now have an option to “Hide on checked devices.” Then select mobile.

Hide on mobile devices
Hide on mobile devices

And that’s it! Super simple. If you want to tweak the media query, you could also easily apply your own using this same plugin. Just follow the instructions below.

(Optional) Tweak Media Query

The great thing about this plugin is that it also lets you easily add custom classes and IDs to widgets. So you could tweak it and use your own media query if you want.

Step 1

Click into the widget and in the “Class and ID” tab input the following class: hide_on_mobile.

Hide on mobile CSS class
Hide on mobile CSS class

Step 2

Now we need to add some custom CSS for the class we used above and our custom media query. I recommend simply dropping this into the WordPress customizer CSS panel. We are going to add the following code:

@media only screen and (max-width:480px) {
.hide_on_mobile {
display: none !important;}

This will hide it on any screen that is 480px and below. You can then tweak it to whatever size you prefer.

[alert-note]If you want to get even more advanced checkout Media Queries for Standard Devices and you can create additional classes for different devices. For example, with the above class we created our widget will still show on an Ipad, but maybe you don’t want your widget showing on anything smaller than a desktop or laptop. You can easily do that with additional classes and media queries.[/alert-note]

As always feel free to leave your comments below!

Brian Jackson

I craft actionable content and develop performance-driven WordPress plugins. Connect on Twitter or subscribe to my newsletter (twice a month, no spam).

54 thoughts on “How to Hide WordPress Widgets on Mobile Devices”

  1. Thank you so much for your useful tip, Brian. I’d like to ask you a favor with almost the same question. How do I hide feature image on mobile devices? It consumes a lot of loading time on my site. My site is Please have a look. Thank you in advance.

  2. Hello!

    I think I see a flaw in this detection method, but maybe I am mistaken…

    Isn’t the idea of basing the detection of a mobile device on the screen’s width, well, ridiculous, when nowadays the vast majority of commercial phones offer resolutions that look like these of a desktop monitor ?

    Examples : The Nexus 5 = 1920×1080. Iphone 5 : 1136 x 640. Galaxy S6 2560 x1440. Nokia Lumia : 1280 x 768.

    See ? According to these, all those phones, representing the almost entirety of the smartphone market, would pass as non-mobile devices…

    I hope I’m not looking agressive, I’m badly needing a mobile discrimination workaround, me too :)

    • Hey Oliver, thanks for the comment. But I think you are little confused on the actual width in px for the devices. Check out this link and see the CSS width column. Hopefully that explains it a bit more. Big difference between CSS width on display vs resolution. Also I own a Nokia Lumia, and I know my site works with this article :)

      • Hi Brian!

        This is great news! I had no idea O_o
        For me, 1 pixel = 1 pixel. I wouldn’t have imagined there would be sometimes more pixels per unit of width.

        Thank you for the link, I learned lots of stuff from the googling that followed.

        Now, if I get back to the original article at the bottom of which we’re commenting, though, the code that is used is “max-width:480px”.

        I hope I’m not abusing your time, but, then, how can one tell which width is measured here, from pixel width (huge, have you seen the Nexus 5 O_o) or device-width (small) ?

        If the unit that matters to discriminate contents and not show a widget on a mobile side is the device-width, shouldn’t the code given in example be max-device-width, or something like that ?
        Or – perhaps – are all “width” CSS queries using device-width for some other reason I cant’ find ?

  3. Hi Brian, this has been a huge help, although I have done your points in the above and now there is empty space at the bottom of my site where the widget were, it has hidden them but not hidden the space they took up – is there a way around this? the site is

  4. I have searched the web for over 48 hours till I got this straight to the point solution. I have hidden some widget to load time and data for mobile users. I have implemented it on Thanks for the tutorial!

  5. Thanks for uncovering this great plugin.

    My question is similar to Paul Parsons’ earlier in this thread.

    Once you make a right-side widget (a custom sidebar) disappear on, say, an iPad 3 screen, how to you get the content to expand rightwards and take up the now empty right column space, as if it was a page without a column? Paul mentioned adjusting something in his Theme, but didn’t say where or how.

    Any ideas?

  6. THANK YOU!!!! I was having an issue with this on my site and getting so frustrated. I even contacted the web designer who made my theme and he didn’t understand what I was talking about. I did exactly what you said and it worked like a charm :)

  7. Pingback: W is for Widgets – What the Heck Is a WordPress Sidebar Widget? | The Take Action WAHM
  8. Helo thank you, it works for me on mobile, i tried it on tablet with greater width, the widget was gone, hidden, but blanc space was left , took up space, not responsive as other column did not expand to the screen, any solution for that.? Thanks

  9. That partially worked for me. The widgets have disappeared from Classipress(the theme I’m using) listing pages, but not from WordPress normal pages like Home, About Us etc.. It’s a classified ads website. Anyway to hide the widgets completely from the mobile version?

  10. Thanks very much for this tutorial. I was looking forward to hide my widgets and it just work great. May Jesus Christ continue to bless you

  11. Hello Brian,

    This does not seem to be working for me on any of my widgets. Very simple instructions, I know that I am following them correctly. I have tried this with two different widgets. Any ideas? I even attempted to set it to 750px just in case, but still no dice.

  12. Yesss ! Thank you Brian,

    This works very well with the last version of WP and DIVI. I was looking for this for improving the user experience on mobile.

  13. Thank you so much for this plugin. I am getting a “ghost” menu show up when I flip my phones (both android and iOS) – it flickers while I scroll up and down the web page on top of the page content. Do you have any clues how I can fix this? It works perfectly when I hold the phone upright, but if I want to view the page “panorama” style on my phone I get this issue across devices.


Leave a Comment