# 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.

- Type: CSS
- Runs: Site-wide header
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: responsive, mobile, css, blocks
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-visibility-utility-classes/

## Code

```css
@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 use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Hide on Mobile / Hide on Desktop Classes" in its snippet library and add it in one click; or create a new CSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/