The core idea behind a responsive website is simple: your content should fit nicely on any screen, look good, and stay easy to use. Getting there takes a few techniques working together — and the good news is you can do all of it with just HTML and CSS. Responsive design isn't a framework or a piece of software; it's a set of concepts. Here are the ones that matter most.
1 · The viewport meta tag
The single most important line in responsive design. It tells the browser to match the page width to the device width instead of pretending to be a desktop.
HTML<meta name="viewport" content="width=device-width, initial-scale=1.0">
2 · Use box-sizing: border-box
Small change, big impact. By default elements use content-box, so padding and borders get added to your declared width — a 100px div with a 2px border actually renders at 104px, and that overflow breaks layouts on small screens. border-box folds padding and border inside the declared width, making sizes predictable.
CSS* {
box-sizing: border-box;
}
.box {
width: 100px; /* still renders at 100px */
padding: 10px;
border: 2px solid black;
}
3 · Dynamic element dimensions
A fixed 500px width overflows any device narrower than 500px. Use min-width / max-width with fluid units so elements flex within bounds.
CSS.responsive-image {
width: 80%; /* fluid */
max-width: 600px; /* never wider than 600 */
min-width: 300px; /* never narrower than 300 */
height: auto; /* keep aspect ratio */
}
.fluid-container {
width: 90vw; /* 90% of viewport width */
margin: 0 auto;
}
4 · Use the <picture> tag
Serve different image sources at different sizes — smaller files to smaller screens, which is a real performance win.
HTML<picture>
<source media="(min-width: 768px)" srcset="image-large.jpg">
<source media="(min-width: 480px)" srcset="image-medium.jpg">
<img src="image-small.jpg" alt="Descriptive alt text">
</picture>
5 · Responsive text size
Beyond media queries, viewport units let type scale with the screen. Just guard the extremes — 10vw can be unreadable on phones and enormous on monitors — by pairing it with clamp() or breakpoints.
CSSh1 {
font-size: 10vw; /* scales with width */
font-size: clamp(1.8rem, 10vw, 4rem); /* safer */
}
6 · Reach for flexible layouts
Flexbox and Grid are built for responsiveness. Flexbox handles one-dimensional rows/columns and wraps gracefully; Grid handles two-dimensional layouts with ease.
CSS · Flexbox.flex-container {
display: flex;
flex-wrap: wrap; /* items drop to next line */
}
.flex-item {
flex: 1 1 200px; /* grow, shrink, 200px base */
}
CSS · Grid.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
The auto-fit + minmax() pattern is the responsive grid trick: columns fit themselves to the available width with no media queries at all. MDN has deeper guides on Flexbox and Grid.
7 · Media queries, the safety net
Media queries apply styles only when the viewport meets a condition — the workhorse of breakpoint-based design.
CSS/* applies between 320px and 768px wide */
@media screen and (min-width: 320px) and (max-width: 768px) {
.element { width: 100px; }
}
Combine features with and, broaden with a comma (or), or invert with not. For the full rundown see my guide to CSS media queries.
8 · Use auto on media
Images and video are the usual overflow culprits. The three-line fix makes them scale to their container and never spill past it.
CSSimg, video {
width: 100%;
height: auto; /* keep aspect ratio */
max-width: 100%; /* never exceed the container */
}
That max-width: 100% is the crucial one — it stops a large image file from blowing past its parent and breaking the layout.
9 · Use frameworks when it helps
Hand-rolling responsiveness is time-consuming. Frameworks ship grid systems, utility classes, and adaptive components out of the box:
Wrapping up
We covered the viewport tag, box-sizing, fluid dimensions with min/max and viewport units, the <picture> element, responsive type, Flexbox and Grid, media queries, and frameworks. Keep practising and don't be afraid to experiment — that's how the concepts stick. Happy reading!