<!-- min-width example -->
<div class="box"></div>
.box {
height: 10rem;
width: 10rem;
background-color: red;
border-radius: 0.5rem;
}
/* this will make box red color if the device width is greater than 768px */
@media (min-width: 768px) {
.box {
background-color: blue;
}
}
/* this will make box red color if the device width is greater than 1024px */
@media (min-width: 1024px) {
.box {
background-color: yellow;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.