# Hide Blocks on Mobile or Desktop With a CSS Class

> Adds hide-on-mobile, hide-on-tablet and hide-on-desktop classes you can put in any block's "Additional CSS class" field to show it only on certain screen sizes.

- Type: CSS
- Runs: Site-wide header
- Category: [Block Editor](https://wpide.com/library/category/gutenberg/)
- Tags: responsive, css, blocks
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/hide-blocks-by-device-classes/

## Code

```css
@media (max-width: 599px) {
    .hide-on-mobile {
        display: none !important;
    }
}

@media (min-width: 600px) and (max-width: 1023px) {
    .hide-on-tablet {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    .hide-on-desktop {
        display: none !important;
    }
}
```

## Notes

Breakpoints are 600px and 1024px; change them to match your theme.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Hide Blocks on Mobile or Desktop With a CSS Class" 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/