HTML Responsive Design
Responsive design means your web page looks good and works well on every screen — a phone, a tablet, a laptop, and a large desktop monitor. The page adjusts its layout based on the available screen width. This topic covers the HTML foundations of responsive design.
Why Responsive Design Matters
More than half of all web traffic comes from mobile devices. A page built only for desktop screens forces mobile users to zoom in and scroll sideways. Responsive pages adapt automatically — no zooming or sideways scrolling required.
Visual Diagram — Same Page on Different Screens
Desktop (1200px wide): +-------+-------+-------+ | Col 1 | Col 2 | Col 3 | +-------+-------+-------+ Tablet (768px wide): +-------+-------+ | Col 1 | Col 2 | +-------+-------+ | Col 3 | +---------------+ Mobile (360px wide): +---------------+ | Col 1 | +---------------+ | Col 2 | +---------------+ | Col 3 | +---------------+ Same content, different layout for each screen.
The Viewport Meta Tag
The viewport meta tag is the starting point of every responsive page. Without it, mobile browsers render the page as if it were on a desktop screen and then shrink the entire result to fit the small screen — making text tiny and unreadable.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Place this tag inside the <head> section of every HTML page.
What Each Part Means
width=device-width → set the page width to match the device screen width initial-scale=1.0 → start at 100% zoom (no zooming in or out on load)
Visual Diagram — Without vs With Viewport Tag
Without viewport meta tag on mobile: +-----------------------------------+ | Full 980px desktop layout | | (shrunk to fit 360px screen) | ← text is tiny | User must pinch-zoom to read | +-----------------------------------+ With viewport meta tag on mobile: +------------------+ | Layout fits | | 360px screen | ← text is readable | No zooming needed| +------------------+
Responsive Images
A fixed-width image overflows its container on small screens. Set the width of images to 100% using CSS, and they scale down automatically to fit any container.
<img src="banner.jpg" alt="Course banner" style="width:100%; height:auto;">
The height:auto rule preserves the image's original proportions as it scales.
The max-width Approach
Using max-width: 100% instead of width: 100% lets the image display at its natural size on large screens, but shrink on small screens. The image never grows larger than its actual pixel dimensions.
img {
max-width: 100%;
height: auto;
}
The picture Element — Art Direction
The <picture> element lets you serve different image files for different screen sizes. This is called art direction — showing a zoomed-in portrait crop on mobile and a wide landscape crop on desktop.
<picture> <source media="(max-width: 600px)" srcset="banner-mobile.jpg"> <source media="(max-width: 1000px)" srcset="banner-tablet.jpg"> <img src="banner-desktop.jpg" alt="Course banner"> </picture>
Visual Diagram — picture Element Logic
Browser checks screen width: ≤ 600px → loads banner-mobile.jpg ≤ 1000px → loads banner-tablet.jpg > 1000px → loads banner-desktop.jpg (the img fallback)
The <img> at the bottom is the fallback for browsers that do not support <picture>.
The srcset Attribute for Resolution Switching
The srcset attribute on a regular <img> tag lets you provide multiple image versions at different pixel densities. The browser picks the best one for the user's screen resolution.
<img src="photo.jpg"
srcset="photo.jpg 1x, photo@2x.jpg 2x, photo@3x.jpg 3x"
alt="Profile photo">
High-resolution (Retina) screens use the 2x or 3x version. Standard screens use the 1x version. This keeps images sharp on all devices without wasting bandwidth on low-resolution screens.
Responsive Tables
Wide tables overflow their container on mobile. Wrap any table in a <div> with horizontal scrolling to handle this gracefully.
<div style="overflow-x: auto;">
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>City</th>
<th>Score</th>
</tr>
...
</table>
</div>
The table keeps its full width and the user scrolls horizontally inside the container, instead of the table breaking the page layout.
Responsive Typography
Fixed font sizes like 16px do not adapt to screen size. Use relative units — em, rem, or vw — so text scales with the screen.
/* Scales with browser default font size */
p { font-size: 1rem; }
/* Scales with viewport width */
h1 { font-size: 5vw; }
/* Clamp: min, preferred, max */
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }
What clamp Means
clamp(1.5rem, 4vw, 3rem)
↑ ↑ ↑
minimum preferred maximum
On a 300px phone: 4vw = 12px → too small → uses 1.5rem (minimum)
On a 900px tablet: 4vw = 36px → within range → uses 4vw
On a 1500px monitor: 4vw = 60px → too big → uses 3rem (maximum)
CSS Media Queries Basics
Media queries let you apply different CSS styles depending on screen width. Although CSS is a separate topic, understanding the concept is important for HTML responsive design.
/* Base styles for all screens */
.container { padding: 20px; }
/* Styles for screens 768px wide or narrower */
@media (max-width: 768px) {
.container { padding: 10px; }
}
/* Styles for screens 480px wide or narrower */
@media (max-width: 480px) {
.container { padding: 5px; }
}
Common Breakpoints
Screen Type Typical Width ------------ ------------------------- Mobile 320px – 480px Large Mobile 481px – 767px Tablet 768px – 1023px Desktop 1024px – 1279px Large Desktop 1280px and above
The Mobile-First Approach
Mobile-first means you write your base CSS for small screens and then use media queries to add styles for larger screens. This approach results in faster loading on mobile devices because the browser applies fewer styles by default.
/* Mobile styles — the default, no media query needed */
.column { width: 100%; }
/* Tablet and above */
@media (min-width: 768px) {
.column { width: 50%; }
}
/* Desktop and above */
@media (min-width: 1024px) {
.column { width: 33.33%; }
}
Visual Diagram — Mobile-First Column Behaviour
Mobile (default, no query): +------------------+ | Column (100%) | +------------------+ | Column (100%) | +------------------+ Tablet (min-width: 768px): +----------+----------+ | Col(50%) | Col(50%) | +----------+----------+ Desktop (min-width: 1024px): +--------+--------+--------+ |Col(33%)|Col(33%)|Col(33%)| +--------+--------+--------+
Responsive Embed — Videos and Iframes
Videos and iframes embedded from YouTube or other sources have a fixed width and height by default. Wrap them in a container with a padding technique to make them scale proportionally.
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
<iframe
src="https://www.youtube.com/embed/VIDEO_ID"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
allowfullscreen>
</iframe>
</div>
The padding-bottom of 56.25% creates a 16:9 aspect ratio container. The iframe fills the container completely and scales with it.
Responsive Design Checklist
✓ viewport meta tag in <head> ✓ Images with max-width: 100%; height: auto ✓ Tables wrapped in overflow-x: auto container ✓ Text in relative units (rem, em, vw, clamp) ✓ Media queries for layout changes at breakpoints ✓ Mobile-first CSS approach ✓ Responsive video/iframe embed wrappers ✓ Test on real devices or browser developer tools
Responsive design is not a single technique — it is a collection of HTML and CSS decisions that together create a page that adapts to any screen. Starting with the viewport meta tag and responsive images covers the most common issues for most pages.