Home / Wordpress / How To Hide A WordPress Widget On Mobile Devices

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.

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?

About Ayorinde Ayodeji

Ayorinde Ayodeji is the CEO of caffinegeeks. When he’s not busy making Caffinegeeks Products better, you can find him Biking, Coding, and Making researchs.Web developer and SEO Expert by heart.

Check Also

How to Create WordPress .Htaccess File

You can set many security settings using Wp .htaccess file, add rules for redirection, block …

Leave a Reply

Your email address will not be published. Required fields are marked *