How to Hide WordPress Widgets on Mobile Devices

wordpress mobile

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!

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.

Step 1

First you will need to install a free WordPress plugin called ZigWidgetClass. (There is an alternative plugin called Widget CSS Classes which this tutorial should also work with, however it has been buggy lately and so I recommend the one I am using).

Step 2

Now we need to add some custom CSS for a class and we are going to use a media query. I would recommend adding the CSS in your theme’s custom CSS panel. If you don’t have one you can also use this free plugin: Custom CSS Manager. 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. Notice above we named our class hide_on_mobile.

Step 3

Now we need to add the class to a widget that we want to hide on a mobile device. So we will go into Appearance and click into “Widgets.”

wordpress appearance widgets

Step 4

Now we are going to click into the widget you want to hide and input the class we made earlier: hide_on_mobile into the “CSS Classes” box at the top of the widget. This classes box was created with the ZigWidgetClass plugin we installed earlier and is available on all of your widgets. Make sure to click “Save” on your widget.

hide widget on mobile device

And that’s it! That widget will no longer show on mobile devices.

If you want to get even more advanced check out 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.

As always feel free to leave your comments below!

GET MORE STUFF LIKE THIS

Marketing, WordPress, Blogging Tips, SEO and Reviews, once a week.

Thank you for subscribing.

Something went wrong.

45 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 mumovi.com. 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. http://mydevice.io/devices/ 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. 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 tasmag.com Thanks for the tutorial!

  4. 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?

  5. 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 :)

  6. 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

  7. 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?
    Thanks

  8. 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

  9. 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.

  10. 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

136 Shares
Tweet
Share
Share
Buffer