How To Hide A WordPress Widget On Mobile Devices

If you’ve added lots of widgets to your WordPress sidebar or footer, I can bet it will make your site look cluttered when viewed on mobile devices. If you really want a great user experience for your readers then I highly suggest you hide some widgets from the mobile view of your responsive WordPress blog especially the irrelevant ones.

I simply accomplish this on Mobilitaria Tech blog by making use of css media queries. Alternatively, you can make use of WordPress plugins that can stop a widget from displaying on mobile devices.

CSS media queries are used for altering the properties of the website according to the device’s specifications. These queries allow me to target style based on different properties of devices such as screen resolution, width and orientation.

Let’s say for example, I want to hide AdSense Matched-content unit from displaying when my WordPress blog is viewed on a mobile phone, all I need to do is to get the ID of the widget and add the code below to the “Custom CSS” file of my site :

@media screen and (max-width: 480px) {
 #text-12 {
  display: none;
 }
}

In the example above, the code for the Adsense matched-content was added to a WordPress text widget whose ID is text-12.
You can add the CSS in “Appearance => Theme Options => “Custom CSS” or install JetPack WordPress Plugin, activate “Custom CSS” via JetPack settings and add the css above to “Edit CSS” via “Appearance”.
Alternatively, you can make use of the plugins “Widget Options” or “ZigWidgetClass
If you install “Widget Options” plugin, go to “Appearance” > “Widgets” and navigate to the widget you want to hide on mobile devices. Then, set the options as seen in the screenshot below :

Do you know other easy ways to hide WordPress widgets on mobile screens?

Recommended : How To Hide Widgets On Specific WordPress Pages

2 Comments

Leave a Reply
  1. Wow! This is really great Jide,

    I've been looking for ways to hide some widgets on mobile and finally, here is a perfect solution. The easiest way for me to do this is edit the css because i really don't want much plugins on my blog.

    Thanks once again, Jide.

Leave a Reply

We're glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our comment policy. Your email address is required but will not be published. No keyword stuffing in the name field and commenting from blah blah blah makes no sense. Thank You.

Ti-Kon 2.0 – Locate, Monitor and Recover Your Car With Ease

Domain Redemption Period : Meaning, Length and Fee