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) {
...
}
Last updated