Media Queries

Media width

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

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

@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

Media orientation

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

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