> For the complete documentation index, see [llms.txt](https://web-dev-guide.wishtack.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://web-dev-guide.wishtack.io/responsive-web-design/media-queries.md).

# Media Queries

## Media width

Media queries allow **CSS modification depending on the screen's size**.

```markup
<button
        class="wt-hide-gt-sm"
        data-role="wt-menu-button">Menu</button>

<div class="wt-show-gt-sm">
    <button>Action 1</button>
    <button>Action 2</button>
    <button>Action 3</button>
    <button>Action 4</button>
</div>
```

```css
@media (max-width: 599px) {
    .wt-show-gt-sm {
        display: none;
    }
}

@media (min-width: 600px) {
    .wt-hide-gt-sm {
        display: none;
    }
}
```

<https://codepen.io/younes-jaaidi/pen/LJdQQv>

{% embed url="<https://codepen.io/younes-jaaidi/pen/LJdQQv>" %}

## Media orientation

It is also possible to modify CSS depending on the **device's orientation**.

```css
@media (orientation: landscape) {
    ...
}
```