Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
where's it braked?
#dbg-mq {
color: white;
height: 10px;
position: absolute;
right: 10px;
top: 10px;
width: 10px;
z-index: 1000000;
}
#dbg-mq div {
display: none;
}
@media (max-width: 480px) {
#dbg-mq div.screen-xs {
display: block;
}
}
@media (min-width: 480px) and (max-width: 768px) {
#dbg-mq div.screen-sm {
display: block;
}
}
@media (min-width: 768px) and (max-width: 992px) {
#dbg-mq div.screen-md {
display: block;
}
}
@media (min-width: 992px) and (max-width: 1200px) {
#dbg-mq div.screen-lg {
display: block;
}
}
<div id="dbg-mq">
<div class="screen-xs">XS</div>
<div class="screen-sm">SM</div>
<div class="screen-md">MD</div>
<div class="screen-lg">LG</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment