Width Height and Orientation Queries
Target specific viewport dimensions and device orientations with media features.
Width Height and Orientation Queries is a free CSS Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
width Media Feature
The width feature targets the viewport width. Use min-width and max-width to define ranges.
@media (min-width: 768px) {
/* 768px and wider */
}height Media Feature
The height feature targets the viewport height. Useful for short viewports (like landscape phones) where vertical space is limited.
@media (min-height: 600px) {
.hero { min-height: 80vh; }
}Short Viewport Pattern
Detect short viewports and reduce padding/heights that would cause content to overflow:
@media (max-height: 500px) {
.modal {
max-height: 90vh;
overflow-y: auto;
}
}orientation: portrait and landscape
The orientation feature detects if the viewport is taller (portrait) or wider (landscape) than it is in the other direction.
@media (orientation: landscape) {
.hero { min-height: 100vh; flex-direction: row; }
}
@media (orientation: portrait) {
.hero { min-height: 60vh; flex-direction: column; }
}Device Pixel Ratio
Target high-DPI (Retina) screens with the resolution feature or the non-standard but widely supported -webkit-device-pixel-ratio.
@media (resolution >= 2dppx) {
.logo {
background-image: url("logo@2x.png");
background-size: 100px 40px;
}
}aspect-ratio Feature
Target specific viewport aspect ratios. Useful for centering content differently in 4:3 vs 16:9 viewports.
@media (aspect-ratio: 16/9) {
.video { max-width: 100%; }
}hover Capability
The hover: hover feature detects if the primary input is a precise pointer that can hover. Useful for touch-device-specific styles.
@media (hover: hover) {
.card:hover { transform: translateY(-4px); }
}
@media (hover: none) {
.card:active { transform: translateY(-4px); }
}pointer Feature
pointer: fine is a precise mouse cursor; pointer: coarse is a finger or stylus. Useful for adjusting tap target sizes.
@media (pointer: coarse) {
button {
min-height: 44px;
min-width: 44px;
}
}Combining width and height
Create landscape phone-specific rules by combining min-width with max-height:
@media (min-width: 600px) and (max-height: 450px) {
/* landscape phone */
.nav { height: 48px; }
}Viewport vs Device Dimensions
CSS media queries target the viewport (the browser window), not the physical device screen dimensions. Resizing a desktop browser window changes the viewport width in real time.
Viewport Units and Media Queries
Media queries and viewport units (vw, vh) respond to the same viewport dimensions. Use media queries for layout changes and viewport units for fluid sizing within a layout.
Quick Check
Which media feature detects if a device has a precise pointer that can hover over elements?
Recap
Media features include width, height, orientation, resolution, hover, and pointer. Use them to adapt layouts to viewport dimensions and device capabilities. The hover and pointer features help target touch vs. mouse devices beyond just screen size.
Frequently asked questions
Is the “Width Height and Orientation Queries” lesson free?
Yes — the full text of “Width Height and Orientation Queries” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.
What will I learn in “Width Height and Orientation Queries”?
Target specific viewport dimensions and device orientations with media features. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start CSS Academy?
No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Width Height and Orientation Queries” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this CSS Academy lesson?
Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Syntax and Common Breakpoints
- Width Height and Orientation Queries
- Prefers-Color-Scheme and Prefers-Reduced-Motion
- Combining Multiple Media Queries