8/14/2016

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


Share :


1 comment:

  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.

    ReplyDelete

We love to hear from you!

Sign in to comment "anonymously" without entering verification text.

Want to be notified when I reply your comment? Tick the "Notify Me" box.

If your comment is unrelated to this post, please drop it at my Facebook group here.

THANKS.

Designed by Jide Ogunsanya.