2024-08-17

How to hide a WordPress Widget on Mobile

Part of your rebuilt static knowledge blog.

To hide a widget on mobile devices while keeping it visible on desktops using its ID or class, you'll need to add some custom CSS to your WordPress site. Here’s a step-by-step guide:

1. Identify the Widget’s ID or Class

If you haven't already done this:

Use the browser’s developer tools (right-click on the widget > Inspect) to find the widget’s ID or class. It will look something like id="text-5" or class="widget widget_text".

2. Add Custom CSS to Hide the Widget on Mobile

Once you have the ID or class, you can use CSS to hide the widget on mobile devices. Here’s how:

a. Go to the Customizer:

In your WordPress dashboard, navigate to Appearance > Customize.

b. Add the CSS:

Click on Additional CSS.

Enter the following CSS code:

/* Hide widget on mobile */
@media only screen and (max-width: 767px) {
#your-widget-id {
display: none;
}
}

c. Publish the Changes:

Click Publish to save your custom CSS.

3. Explanation of the CSS Code

@media only screen and (max-width: 767px): This part of the code is a media query. It applies the enclosed CSS rules only when the screen width is 767 pixels or less, which is typically the size of mobile devices.
#your-widget-id: This is the selector targeting the specific widget by its ID.
display: none;: This CSS property hides the selected widget from view.

4. Verify the Changes

After saving, view your site on both desktop and mobile devices to ensure the widget is correctly hidden on mobile but visible on the desktop.

This method allows you to control the visibility of your widgets across different devices, ensuring a better user experience on both mobile and desktop views.