Discover in this tutorial how to hide web elements in WordPress depending on device size with a little CSS.
Do you want to hide certain web elements on mobile devices, or do you prefer to do it when viewed on desktop?
Some plugins like EditorsKit allow you to control the display of a block depending on which device it is viewed on. But in many cases, using such a complex plugin just for that is not the best option.
So, in today’s tutorial you are going to see how to achieve the same natively by giving CSS classes to editor blocks and applying styles.
Let’s get started:
Steps to hide blocks based on device resolution
1. Create and add a CSS class
First of all you have to decide what name you are going to use for the CSS class. For example:
hide-on-mobilehide-on-desktophide-on-tablet-and-desktop
Once you are clear on the nomenclature (you can use the previous proposal if you want), go to the “Advanced” section and add the one you are going to use in “Additional CSS class(es)”.
That is, if you want a block not to be displayed on mobile, add the hide-on-mobile class.
Once you have done that, save the changes.
2. Modify the style.css
Next, enter the following code at the end of the style.css file:
To see this and another 997 code snippets of this website, login or subscribe here.
Here is the CSS needed for the 3 cases I mentioned at the beginning, but you can use only the one you need.
You can also modify the cut-off point where you want it to be applied, customizing the number of pixels for each media query.
Bonus: Substitute EditorsKit
EditorsKit is one of the plugins I used in almost every WordPress installation to extend the block editor options.
But many of those options have already been added to WordPress core and, in addition, the plugin has added a library of patterns (somewhat intrusively) that in most cases I don’t use. In fact, here you can find a tutorial on how to hide the EditorsKit library button.
If, like me, you are thinking of stopping using it in some installations where you have already used it to hide blocks on mobile or desktop, here I bring you a solution.
And it is closely related to this tutorial as the plugin is using CSS classes to hide the elements on different devices. In your case, the classes used are:
editorskit-no-mobileeditorskit-no-tableteditorskit-no-desktop
As these classes are in the HTML of the content, even if you deactivate the plugin they will not disappear.
So the only thing you have to do if you want to keep the elements hidden is to add these lines at the end of the style.css file when you deactivate the plugin:
To see this and another 997 code snippets of this website, login or subscribe here.
These are the media queries used by the plugin for each device, but you can modify them to your liking.
Conclusions
Now you know how to hide web elements depending on the size of the device where it is displayed with a little CSS.
And you have also learned how to stop using the EditorsKit plugin if you were only using that feature.
Any questions? I read you in the comments.
And if you want to give me any suggestion for future tutorials, leave it in the contact form. Advantages of being a subscriber. 😉
