CSS 36 💻 height and width media features
These two media features are the cornerstones of responsive design. They let you apply styles based on the viewport’s dimensions, enabling layouts that adapt to any screen size.
Overview of Features
| Feature | Description | Values |
|---|---|---|
height | Viewport height | Exact, min-height, max-height |
width | Viewport width | Exact, min-width, max-width |
1. height
The height media feature applies styles based on the height of the viewport (or the dimensions of an embedded document).
@media (height: 1024px) {
.container {
background-color: pink;
}
}Variations
| Feature | Description | Example |
|---|---|---|
height | Exact height | @media (height: 1024px) |
min-height | Minimum height | @media (min-height: 1024px) |
max-height | Maximum height | @media (max-height: 1200px) |
Syntax
height: <length>
height: >= 1024px
height: < 1200px
height: 1024pxCommon Use Cases
| Use Case | Example |
|---|---|
| Mobile landscape | @media (max-height: 500px) |
| Tall screens | @media (min-height: 900px) |
| Short screens | @media (max-height: 600px) |
| Full-screen sections | @media (min-height: 100vh) |
2. width
The width media feature applies styles based on the width of the viewport.
@media (min-width: 780px) {
.container {
background-color: red;
}
}Variations
| Feature | Description | Example |
|---|---|---|
width | Exact width | @media (width: 780px) |
min-width | Minimum width | @media (min-width: 780px) |
max-width | Maximum width | @media (max-width: 1200px) |
Syntax
width: <length>
width: >= 780px
width: < 1200px
width: 780pxCommon Breakpoints
| Breakpoint | Description |
|---|---|
320px | Small phones |
480px | Larger phones |
768px | Tablets |
1024px | Small laptops |
1200px | Desktops |
1440px | Large desktops |
1920px | Full HD displays |
Complete Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>height and width Media Features</title>
<style>
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding: 20px;
background: #f8f9fa;
max-width: 1200px;
margin: 0 auto;
line-height: 1.6;
}
h1 {
color: #007bff;
border-bottom: 3px solid #007bff;
padding-bottom: 10px;
}
h2 {
color: #28a745;
border-left: 4px solid #28a745;
padding-left: 15px;
margin-top: 30px;
}
h3 {
color: #333;
margin-top: 20px;
}
section {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
margin: 20px 0;
}
.code-block {
background: #1e1e1e;
color: #d4d4d4;
padding: 15px;
border-radius: 8px;
overflow-x: auto;
font-family: 'Courier New', monospace;
font-size: 0.9rem;
line-height: 1.8;
margin: 10px 0;
}
.reference-table {
width: 100%;
border-collapse: collapse;
margin: 15px 0;
}
.reference-table th,
.reference-table td {
padding: 10px;
border: 1px solid #ddd;
text-align: left;
}
.reference-table th {
background: #007bff;
color: white;
}
.reference-table tr:nth-child(even) {
background: #f8f9fa;
}
.note {
font-size: 0.9rem;
color: #6c757d;
margin-top: 5px;
}
.highlight {
background: #ffc107;
color: #333;
padding: 2px 6px;
border-radius: 4px;
font-weight: bold;
}
/* ====== WIDTH DEMO ====== */
.width-demo {
padding: 20px;
border-radius: 8px;
text-align: center;
font-weight: bold;
font-size: 1.2rem;
margin: 15px 0;
transition: all 0.3s;
background: #e9ecef;
border: 2px solid #ddd;
}
/* Mobile: < 480px */
@media (max-width: 479px) {
.width-demo {
background: #ff6b6b;
color: white;
border-color: #c92a2a;
}
.width-demo::after {
content: " 📱 Mobile (< 480px)";
font-weight: normal;
font-size: 0.85rem;
}
}
/* Large phones: 480px - 767px */
@media (min-width: 480px) and (max-width: 767px) {
.width-demo {
background: #ffc107;
color: #333;
border-color: #d39e00;
}
.width-demo::after {
content: " 📱 Large Phone (480-767px)";
font-weight: normal;
font-size: 0.85rem;
}
}
/* Tablets: 768px - 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
.width-demo {
background: #28a745;
color: white;
border-color: #1e7e34;
}
.width-demo::after {
content: " 📟 Tablet (768-1023px)";
font-weight: normal;
font-size: 0.85rem;
}
}
/* Desktops: 1024px - 1439px */
@media (min-width: 1024px) and (max-width: 1439px) {
.width-demo {
background: #007bff;
color: white;
border-color: #0056b3;
}
.width-demo::after {
content: " 💻 Desktop (1024-1439px)";
font-weight: normal;
font-size: 0.85rem;
}
}
/* Large Desktops: ≥ 1440px */
@media (min-width: 1440px) {
.width-demo {
background: #6c5ce7;
color: white;
border-color: #4a2a9e;
}
.width-demo::after {
content: " 🖥️ Large Desktop (≥ 1440px)";
font-weight: normal;
font-size: 0.85rem;
}
}
/* ====== HEIGHT DEMO ====== */
.height-demo {
padding: 20px;
border-radius: 8px;
text-align: center;
font-weight: bold;
font-size: 1.2rem;
margin: 15px 0;
transition: all 0.3s;
background: #e9ecef;
border: 2px solid #ddd;
min-height: 150px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* Short viewport: < 600px */
@media (max-height: 599px) {
.height-demo {
background: #dc3545;
color: white;
border-color: #a71d2a;
}
.height-demo::after {
content: " 📏 Short Viewport (< 600px)";
font-weight: normal;
font-size: 0.85rem;
}
}
/* Medium viewport: 600px - 899px */
@media (min-height: 600px) and (max-height: 899px) {
.height-demo {
background: #ffc107;
color: #333;
border-color: #d39e00;
}
.height-demo::after {
content: " 📏 Medium Viewport (600-899px)";
font-weight: normal;
font-size: 0.85rem;
}
}
/* Tall viewport: ≥ 900px */
@media (min-height: 900px) {
.height-demo {
background: #28a745;
color: white;
border-color: #1e7e34;
}
.height-demo::after {
content: " 📏 Tall Viewport (≥ 900px)";
font-weight: normal;
font-size: 0.85rem;
}
}
/* ====== RESPONSIVE GRID DEMO ====== */
.responsive-grid {
display: grid;
gap: 15px;
margin: 20px 0;
}
/* Mobile: 1 column */
.responsive-grid {
grid-template-columns: 1fr;
}
/* Tablet: 2 columns */
@media (min-width: 600px) {
.responsive-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Desktop: 3 columns */
@media (min-width: 900px) {
.responsive-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* Large Desktop: 4 columns */
@media (min-width: 1200px) {
.responsive-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.responsive-card {
background: white;
border: 2px solid #ddd;
border-radius: 8px;
padding: 20px;
text-align: center;
transition: all 0.3s;
}
.responsive-card:hover {
border-color: #007bff;
transform: translateY(-3px);
box-shadow: 0 4px 15px rgba(0,123,255,0.15);
}
.responsive-card .icon {
font-size: 2.5rem;
display: block;
margin-bottom: 10px;
}
.responsive-card .title {
font-weight: bold;
color: #007bff;
margin-bottom: 5px;
}
.responsive-card .desc {
font-size: 0.85rem;
color: #6c757d;
}
/* ====== LIVE INDICATOR ====== */
.live-indicator {
position: fixed;
bottom: 20px;
right: 20px;
background: #007bff;
color: white;
padding: 12px 20px;
border-radius: 50px;
font-weight: bold;
font-size: 0.85rem;
box-shadow: 0 4px 15px rgba(0,123,255,0.4);
z-index: 1000;
transition: all 0.3s;
display: flex;
flex-direction: column;
gap: 3px;
}
.live-indicator .dimension {
font-size: 0.75rem;
opacity: 0.9;
}
/* ====== VIEWPORT VISUALIZATION ====== */
.viewport-viz {
position: relative;
background: #e9ecef;
border: 2px dashed #007bff;
border-radius: 8px;
padding: 20px;
margin: 20px 0;
min-height: 200px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.viewport-viz .dimension-label {
position: absolute;
font-weight: bold;
color: #007bff;
font-size: 0.85rem;
}
.viewport-viz .width-label {
top: -12px;
left: 50%;
transform: translateX(-50%);
background: white;
padding: 2px 10px;
border-radius: 4px;
border: 1px solid #007bff;
}
.viewport-viz .height-label {
right: -12px;
top: 50%;
transform: translateY(-50%) rotate(90deg);
background: white;
padding: 2px 10px;
border-radius: 4px;
border: 1px solid #007bff;
white-space: nowrap;
}
.viewport-viz .content {
font-size: 1.1rem;
font-weight: bold;
color: #333;
}
/* ====== PRACTICAL: RESPONSIVE NAVBAR ====== */
.navbar {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 15px;
background: #007bff;
border-radius: 8px;
margin: 15px 0;
transition: all 0.3s;
}
.navbar a {
color: white;
text-decoration: none;
padding: 8px 16px;
border-radius: 6px;
transition: background 0.3s;
font-weight: bold;
}
.navbar a:hover {
background: rgba(255,255,255,0.2);
}
/* Mobile: vertical stack */
@media (max-width: 599px) {
.navbar {
flex-direction: column;
background: #dc3545;
}
.navbar a {
text-align: center;
}
}
/* Desktop: horizontal row */
@media (min-width: 600px) {
.navbar {
flex-direction: row;
justify-content: center;
}
}
/* ====== BEST PRACTICE: MOBILE FIRST ====== */
.mobile-first-demo {
padding: 20px;
border-radius: 8px;
background: #ff6b6b;
color: white;
text-align: center;
font-weight: bold;
margin: 15px 0;
transition: all 0.3s;
}
/* Mobile first — base styles */
.mobile-first-demo::after {
content: " 📱 Mobile First (base styles)";
font-weight: normal;
font-size: 0.85rem;
display: block;
}
/* Tablet and up */
@media (min-width: 768px) {
.mobile-first-demo {
background: #28a745;
}
.mobile-first-demo::after {
content: " 📟 Tablet and up (min-width: 768px)";
}
}
/* Desktop and up */
@media (min-width: 1024px) {
.mobile-first-demo {
background: #007bff;
}
.mobile-first-demo::after {
content: " 💻 Desktop and up (min-width: 1024px)";
}
}
/* Large desktop and up */
@media (min-width: 1440px) {
.mobile-first-demo {
background: #6c5ce7;
}
.mobile-first-demo::after {
content: " 🖥️ Large Desktop and up (min-width: 1440px)";
}
}
</style>
</head>
<body>
<h1>height and width Media Features</h1>
<!-- ====== 1. WIDTH DEMO ====== -->
<section>
<h2>1. width</h2>
<p>Applies styles based on the <strong>viewport width</strong>. Resize your browser to see the changes!</p>
<div class="width-demo">
Current Width
</div>
<div class="viewport-viz">
<span class="dimension-label width-label" id="width-label">Width: detecting...</span>
<span class="dimension-label height-label" id="height-label">Height: detecting...</span>
<div class="content">
Resize your browser window
</div>
</div>
<div class="code-block">
/* Mobile: < 480px */
@media (max-width: 479px) {
.width-demo { background: #ff6b6b; }
}
/* Large phones: 480px - 767px */
@media (min-width: 480px) and (max-width: 767px) {
.width-demo { background: #ffc107; }
}
/* Tablets: 768px - 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
.width-demo { background: #28a745; }
}
/* Desktops: 1024px - 1439px */
@media (min-width: 1024px) and (max-width: 1439px) {
.width-demo { background: #007bff; }
}
/* Large Desktops: ≥ 1440px */
@media (min-width: 1440px) {
.width-demo { background: #6c5ce7; }
}
</div>
</section>
<!-- ====== 2. HEIGHT DEMO ====== -->
<section>
<h2>2. height</h2>
<p>Applies styles based on the <strong>viewport height</strong>. Resize your browser vertically to see the changes!</p>
<div class="height-demo">
Current Height
</div>
<div class="code-block">
/* Short viewport: < 600px */
@media (max-height: 599px) {
.height-demo { background: #dc3545; }
}
/* Medium viewport: 600px - 899px */
@media (min-height: 600px) and (max-height: 899px) {
.height-demo { background: #ffc107; }
}
/* Tall viewport: ≥ 900px */
@media (min-height: 900px) {
.height-demo { background: #28a745; }
}
</div>
</section>
<!-- ====== 3. RESPONSIVE GRID ====== -->
<section>
<h2>3. Practical Example: Responsive Grid</h2>
<p>This grid adapts from 1 to 4 columns based on the viewport width.</p>
<div class="responsive-grid">
<div class="responsive-card">
<span class="icon">🎨</span>
<div class="title">Design</div>
<div class="desc">Beautiful interfaces</div>
</div>
<div class="responsive-card">
<span class="icon">💻</span>
<div class="title">Development</div>
<div class="desc">Clean code</div>
</div>
<div class="responsive-card">
<span class="icon">📱</span>
<div class="title">Responsive</div>
<div class="desc">Works everywhere</div>
</div>
<div class="responsive-card">
<span class="icon">⚡</span>
<div class="title">Performance</div>
<div class="desc">Fast loading</div>
</div>
</div>
<div class="code-block">
/* Mobile: 1 column */
.responsive-grid {
grid-template-columns: 1fr;
}
/* Tablet: 2 columns */
@media (min-width: 600px) {
.responsive-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Desktop: 3 columns */
@media (min-width: 900px) {
.responsive-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* Large Desktop: 4 columns */
@media (min-width: 1200px) {
.responsive-grid {
grid-template-columns: repeat(4, 1fr);
}
}
</div>
</section>
<!-- ====== 4. RESPONSIVE NAVBAR ====== -->
<section>
<h2>4. Practical Example: Responsive Navbar</h2>
<p>The navbar changes from vertical (mobile) to horizontal (desktop).</p>
<div class="navbar">
<a href="#">🏠 Home</a>
<a href="#">📄 About</a>
<a href="#">⚙️ Services</a>
<a href="#">📞 Contact</a>
</div>
<div class="code-block">
/* Mobile: vertical stack */
@media (max-width: 599px) {
.navbar {
flex-direction: column;
}
}
/* Desktop: horizontal row */
@media (min-width: 600px) {
.navbar {
flex-direction: row;
justify-content: center;
}
}
</div>
</section>
<!-- ====== 5. MOBILE FIRST DEMO ====== -->
<section>
<h2>5. Mobile First Approach</h2>
<p>Start with mobile styles and add complexity as the screen gets larger.</p>
<div class="mobile-first-demo">
Mobile First Demo
</div>
<div class="code-block">
/* Mobile first — base styles */
.demo {
background: #ff6b6b;
}
/* Tablet and up */
@media (min-width: 768px) {
.demo {
background: #28a745;
}
}
/* Desktop and up */
@media (min-width: 1024px) {
.demo {
background: #007bff;
}
}
/* Large desktop and up */
@media (min-width: 1440px) {
.demo {
background: #6c5ce7;
}
}
</div>
</section>
<!-- ====== 6. REFERENCE TABLES ====== -->
<section>
<h2>6. Reference Tables</h2>
<h3>width and height Variations</h3>
<table class="reference-table">
<tr>
<th>Feature</th>
<th>Description</th>
<th>Example</th>
</tr>
<tr>
<td><code>width</code></td>
<td>Exact viewport width</td>
<td><code>@media (width: 780px)</code></td>
</tr>
<tr>
<td><code>min-width</code></td>
<td>Minimum viewport width</td>
<td><code>@media (min-width: 780px)</code></td>
</tr>
<tr>
<td><code>max-width</code></td>
<td>Maximum viewport width</td>
<td><code>@media (max-width: 1200px)</code></td>
</tr>
<tr>
<td><code>height</code></td>
<td>Exact viewport height</td>
<td><code>@media (height: 1024px)</code></td>
</tr>
<tr>
<td><code>min-height</code></td>
<td>Minimum viewport height</td>
<td><code>@media (min-height: 1024px)</code></td>
</tr>
<tr>
<td><code>max-height</code></td>
<td>Maximum viewport height</td>
<td><code>@media (max-height: 1200px)</code></td>
</tr>
</table>
<h3>Common Breakpoints</h3>
<table class="reference-table">
<tr>
<th>Breakpoint</th>
<th>Device</th>
<th>Example</th>
</tr>
<tr>
<td><code>320px</code></td>
<td>Small phones</td>
<td><code>@media (min-width: 320px)</code></td>
</tr>
<tr>
<td><code>480px</code></td>
<td>Larger phones</td>
<td><code>@media (min-width: 480px)</code></td>
</tr>
<tr>
<td><code>768px</code></td>
<td>Tablets</td>
<td><code>@media (min-width: 768px)</code></td>
</tr>
<tr>
<td><code>1024px</code></td>
<td>Small laptops</td>
<td><code>@media (min-width: 1024px)</code></td>
</tr>
<tr>
<td><code>1200px</code></td>
<td>Desktops</td>
<td><code>@media (min-width: 1200px)</code></td>
</tr>
<tr>
<td><code>1440px</code></td>
<td>Large desktops</td>
<td><code>@media (min-width: 1440px)</code></td>
</tr>
<tr>
<td><code>1920px</code></td>
<td>Full HD displays</td>
<td><code>@media (min-width: 1920px)</code></td>
</tr>
</table>
<h3>Common Height Breakpoints</h3>
<table class="reference-table">
<tr>
<th>Breakpoint</th>
<th>Device</th>
<th>Example</th>
</tr>
<tr>
<td><code>500px</code></td>
<td>Mobile landscape</td>
<td><code>@media (max-height: 500px)</code></td>
</tr>
<tr>
<td><code>600px</code></td>
<td>Short viewport</td>
<td><code>@media (max-height: 600px)</code></td>
</tr>
<tr>
<td><code>900px</code></td>
<td>Tall viewport</td>
<td><code>@media (min-height: 900px)</code></td>
</tr>
<tr>
<td><code>1080px</code></td>
<td>Full HD height</td>
<td><code>@media (min-height: 1080px)</code></td>
</tr>
</table>
</section>
<!-- ====== 7. BEST PRACTICES ====== -->
<section>
<h2>7. Best Practices</h2>
<div style="background: #d4edda; padding: 20px; border-radius: 8px; border-left: 4px solid #28a745;">
<h3 style="margin-top: 0; color: #155724;">✅ Do This:</h3>
<ul>
<li><strong>Mobile First</strong> — Start with smallest screen and build up</li>
<li>Use <code>min-width</code> for breakpoints (mobile-first approach)</li>
<li>Use <code>max-width</code> for desktop-first approach</li>
<li>Use relative units (<code>em</code>, <code>rem</code>, <code>%</code>) for breakpoints</li>
<li>Test on real devices, not just browser resizing</li>
<li>Combine width and height for comprehensive responsiveness</li>
<li>Use <code>min-height: 100vh</code> for full-screen sections</li>
</ul>
</div>
<div style="background: #f8d7da; padding: 20px; border-radius: 8px; border-left: 4px solid #dc3545; margin-top: 15px;">
<h3 style="margin-top: 0; color: #721c24;">❌ Don't Do This:</h3>
<ul>
<li>Don't use too many breakpoints — aim for 3–5 major ones</li>
<li>Don't use exact <code>width</code> values (they're rarely useful)</li>
<li>Don't forget about mobile landscape orientation</li>
<li>Don't use fixed pixel values for everything</li>
<li>Don't assume all screens are the same size</li>
<li>Don't forget to test with the viewport meta tag</li>
</ul>
</div>
</section>
<!-- ====== LIVE INDICATOR ====== -->
<div class="live-indicator" id="live-indicator">
<span id="indicator-width">Width: —</span>
<span class="dimension" id="indicator-height">Height: —</span>
</div>
<!-- ====== SCRIPT FOR LIVE DIMENSIONS ====== -->
<script>
function updateDimensions() {
const w = window.innerWidth;
const h = window.innerHeight;
// Update live indicator
document.getElementById('indicator-width').textContent = 'Width: ' + w + 'px';
document.getElementById('indicator-height').textContent = 'Height: ' + h + 'px';
// Update viewport visualization labels
const widthLabel = document.getElementById('width-label');
const heightLabel = document.getElementById('height-label');
if (widthLabel) widthLabel.textContent = 'Width: ' + w + 'px';
if (heightLabel) heightLabel.textContent = 'Height: ' + h + 'px';
// Update breakpoint indicator color
const indicator = document.getElementById('live-indicator');
if (w < 480) {
indicator.style.background = '#ff6b6b';
} else if (w < 768) {
indicator.style.background = '#ffc107';
indicator.style.color = '#333';
} else if (w < 1024) {
indicator.style.background = '#28a745';
indicator.style.color = 'white';
} else if (w < 1440) {
indicator.style.background = '#007bff';
indicator.style.color = 'white';
} else {
indicator.style.background = '#6c5ce7';
indicator.style.color = 'white';
}
}
window.addEventListener('resize', updateDimensions);
window.addEventListener('load', updateDimensions);
updateDimensions();
</script>
</body>
</html>Quick Reference
| Feature | Description | Example |
|---|---|---|
width | Exact viewport width | @media (width: 780px) |
min-width | Minimum viewport width | @media (min-width: 780px) |
max-width | Maximum viewport width | @media (max-width: 1200px) |
height | Exact viewport height | @media (height: 1024px) |
min-height | Minimum viewport height | @media (min-height: 1024px) |
max-height | Maximum viewport height | @media (max-height: 1200px) |
Common Breakpoints
| Breakpoint | Device |
|---|---|
320px | Small phones |
480px | Larger phones |
768px | Tablets |
1024px | Small laptops |
1200px | Desktops |
1440px | Large desktops |
1920px | Full HD displays |
Common Height Breakpoints
| Breakpoint | Device |
|---|---|
500px | Mobile landscape |
600px | Short viewport |
900px | Tall viewport |
1080px | Full HD height |
Best Practices
✅ Do This:
/* Mobile First approach */
.container {
/* Base styles for mobile */
display: block;
}
/* Tablet and up */
@media (min-width: 768px) {
.container {
display: flex;
}
}
/* Desktop and up */
@media (min-width: 1024px) {
.container {
max-width: 1200px;
margin: 0 auto;
}
}
/* Handle mobile landscape */
@media (max-height: 500px) {
.hero {
min-height: 100vh;
}
}❌ Don’t Do This:
/* Don't use exact width values */
@media (width: 780px) {
/* Rarely useful — only matches exactly 780px */
}
/* Don't use too many breakpoints */
@media (min-width: 320px) { }
@media (min-width: 375px) { }
@media (min-width: 414px) { }
@media (min-width: 480px) { }
@media (min-width: 640px) { }
@media (min-width: 768px) { }
/* Too many — aim for 3-5 major breakpoints */
/* Don't forget the viewport meta tag */
/* <meta name="viewport" content="width=device-width, initial-scale=1.0"> */Pro Tip: width and height are the most fundamental media features for responsive design. Use the Mobile First approach — start with styles for the smallest screens and add complexity as the screen gets larger. Use min-width for breakpoints (not max-width). Don’t forget the viewport meta tag — without it, mobile devices won’t respect your media queries! And remember: test on real devices, not just by resizing your browser window!
Stop using slow, ad-bloated tool sites! 🤮
🔎 Search “KandZ Tools” on Google to use many professional utilities for free.
KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)
⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free
🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!
