Core Code
Core Code Modern Dev Handbook

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)

example Min Width Breakpoint open example example Max Width Breakpoint open example example Responsive Layout open example example Responsive Grid open example example Orientation Query open example example Reduced Motion Preference open example example Dark Mode Query open example example Multiple Conditions open example