How to Show WordPress Widgets on Mobile Only (No Plugin Method)

How to Show WordPress Widgets on Mobile Only

If you want to show a WordPress widget on just mobile, there are a few options.

One, you can edit your functions.php to add new widget block that only shows on a certain device (I DEFINITELY don’t recommend doing this).

Two, you can pay for the premium version of a plugin (like this one – Widget Options Plugin), that gives you that functionality (this will bloat your site and add unnecessary code to affect page load). I have found the free version of this plugin to not include device control.

Or three, you can add a little bit of CSS to get the job done. I totally recommend this option.

Let me know show you how to add that CSS to show WordPress widgets on mobile only.

---

1. How to add CSS To Hide WordPress Widgets

CSS (Cascading Style Sheets) is the code on a website that customizes style – colors, size, fonts, etc. This is really easy to add to a website to customize anything! Let’s find where you can add your CSS.

Appearance > Customize

Since WordPress 4.7, you can add CSS is an a CSS block in the Appearance section of the WordPress dashboard. Click “Appearance” in your left menu sidebar in WordPress, and click “Customize”. This should be available for Astra, Elementor, Genesis and most other sites.

CSS Requirements

All CSS needs to include a class or div id of the item you want to style. Classes have a “.” (period” to set them apart. Div id’s have a # (number sign). Examples:

• #search-6
• .home
• .post-31638

CSS also needs two curly brackets to set apart the style code, a style indicator with a colon, and semi-colons at the end of every style line. If your identifiers and style identifiers are correct, these codes can change anything on your site! Like this:

#search-6 {
color: green;
}

---

How to Find your Identifier

To find your widget identifier, add your widget to the correct widget block and publish to your site. Now view your site on a desktop computer with the Chrome browser. Go to the page that the widget is appearing.

• Right click on the page and in the menu click “Inspect” or “Inspect Element”
• You can also use the keyboard shortcut – Press ⌘+⌥+I simultaneously.
• Hover on the left “inspect element arrow” on the top grey bar of the window:

• Click that to be able to identify anything on the page.
• Now hover over the widget that you added in the widgets section and highlight a section of it. Chances are you can’t highlight all of it.
• Decide if you want to include the widget title, or any unique parts of the widget.
• In the inspect window, find the section you highlighted, and scroll up until all of the element is highlighted on the page. That will show you the unique identifier just for that widget:

---

---

• When you find the identifier, you want the largest identifier that is unique enough to target just that widget. (You don’t want just .widget_search).
• In this case, I want #search-2.

It can be hard to find the best widget selector. Keep playing around with different class and ID selectors to find the best one. If you add CSS to the customizer in WordPress, you can’t break anything. You might just keep changing locations of things to get it right.

How to Add the Correct CSS

Here are different code variations to show widgets on a mobile version, and hide widgets on different devices.

Each media query in the codes below sets the device width that is needed (or not needed) to show the widget. 480 is a default media query breakpoint for mobile devices. This is usually tested against iphone, Android phones, and other devices.

Use this code to block a widget from showing on mobile devices. Change the bold identifier to the one you found:

@media(max-width:480px){
    .widget#search-2 {
        display:none;
    }
}

Use this code to only show something on mobile devices:

@media(min-width:480px){
    .widget#search-2 {
        display:none;
    }
}

Here’s another example using an Elementor site:

@media(min-width:480px){
    .elementor-element-393985d {
        display:none;
    }
}

Here’s another example using an Astra site:

@media(max-width:480px){
    .widget#block-2 {
        display:none;
    }
}

Add the correct code to your CSS Customizer in WordPress and SAVE your site. Clear your cache and check your site on desktop and mobile. If your code is correct, the correct browser should be showing the correct widget!

If you can’t find the correct identifier, or your CSS isn’t working, leave a comment at the bottom of this page and I’ll help you out!