Basic Media Query

Apply styles when the viewport width reaches a breakpoint.

Preview

Code

<style>
.box{
background:#2563eb;
color:white;
padding:20px;
}

@media (max-width:600px){
.box{
background:#ef4444;
}
}
</style>

<div class="box">Resize the screen</div>

More CSS Media Queries Examples (8)