Hide on Mobile / Hide on Desktop Classes
Adds utility classes you can put on any block (hide-on-mobile, hide-on-tablet, hide-on-desktop) to show different content on different screen sizes.
Opens WPIDE on
Code
@media (max-width: 767px) {
.hide-on-mobile {
display: none !important;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.hide-on-tablet {
display: none !important;
}
}
@media (min-width: 1024px) {
.hide-on-desktop {
display: none !important;
}
}Notes
Add the class under Advanced > Additional CSS class(es) in the block settings. Breakpoints are 768px and 1024px.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.