Core Code
Core Code Modern Dev Handbook

Orientation Query

Apply styles depending on screen orientation.

Preview

Code

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

@media (orientation:landscape){
.box{
background:#22c55e;
}
}
</style>

<div class="box">Rotate device</div>

More CSS Media Queries Examples (8)

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