in

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

Please Share :

Receive Alerts In Your Email Inbox

Enter Your Email Address Below To Receive Latest Updates via Inbox, Free of Charge!

What do you think?

93 Points
Upvote Downvote

Written by Jide Ogunsanya

Pro Nigerian Blogger, Digital Marketer and Web designer. I help business owners to grow their businesses online. You can join my Facebook Group here or join my Telegram Group here.

Comments are closed.

2 Comments

  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.

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

Domain Redemption Period : Meaning, Length and Fee