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

Recommended : How To Get ID of a WordPress Widget 

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