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. This is 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, and your progress syncs across the web and the CoddyKit app. The CSS Academy course includes 4 lessons in total.
width Media Feature
The width feature targets the viewport width. Use min-width and max-width to define ranges.
<div class="box">width feature demo</div>
height Media Feature
The height feature targets the viewport height. Useful for short viewports (like landscape phones) where vertical space is limited.
<div class="hero">Hero (grows on tall viewports)</div>
Short Viewport Pattern
Detect short viewports and reduce padding/heights that would cause content to overflow:
<div class="modal">Modal content that scrolls when the viewport is short. Lorem ipsum dolor sit amet, consectetur.</div>
orientation: portrait and landscape
The orientation feature detects if the viewport is taller (portrait) or wider (landscape) than it is in the other direction.
<div class="hero">Orientation-aware hero</div>
Device Pixel Ratio
Target high-DPI (Retina) screens with the resolution feature or the non-standard but widely supported -webkit-device-pixel-ratio.
<div class="logo"></div>
aspect-ratio Feature
Target specific viewport aspect ratios. Useful for centering content differently in 4:3 vs 16:9 viewports.
<div class="video"></div>
hover Capability
The hover: hover feature detects if the primary input is a precise pointer that can hover. Useful for touch-device-specific styles.
<div class="card">Card (hover me)</div>
<div class="card is-hovered">Card (hover state shown)</div>
pointer Feature
pointer: fine is a precise mouse cursor; pointer: coarse is a finger or stylus. Useful for adjusting tap target sizes.
<button>Tap target</button>
Combining width and height
Create landscape phone-specific rules by combining min-width with max-height:
<div class="nav">Nav bar</div>
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.
Learn CSS with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 40
- Lessons
- 159
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. 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. The CSS Academy course includes 4 lessons in total.
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, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 4.
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