What is Responsive Web Design?
Responsive web design (RWD) is an approach where a website adapts its layout and content to fit any screen size — from a 320px wide phone to a 2560px wide desktop monitor. Instead of building separate mobile and desktop websites, you build one site that responds to the user's screen.
A responsive website achieves this through three core techniques: fluid layouts, flexible images, and CSS media queries.
The Viewport Meta Tag
The first step to making any website responsive is adding the viewport meta tag to your HTML <head>. Without it, mobile browsers will render the page at desktop width and zoom it out, making text tiny and unusable.
<!-- Always include this in your <head> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">width=device-width— sets the viewport width to the device's actual screen widthinitial-scale=1.0— sets the initial zoom level to 100% (no zoom)
This one tag is the foundation of responsive design. If a site looks broken on mobile, the first thing to check is whether the viewport meta tag is present and correct.
Fluid Layouts
A fluid layout uses percentage widths and relative units instead of fixed pixel widths, so elements naturally resize with the screen.
/* Rigid layout — breaks on mobile */
.container {
width: 960px; /* fixed — overflows small screens */
}
/* Fluid layout — adapts to any screen */
.container {
max-width: 1200px;
width: 100%; /* takes full width of viewport */
margin: 0 auto; /* centered */
padding: 0 1rem; /* small breathing room on edges */
}
/* Fluid columns */
.card {
width: 33.33%; /* 3 columns on wide screens */
padding: 1rem;
}
/* Better: use CSS Grid or Flexbox */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}Use max-width instead of width for containers. This allows content to shrink on small screens but prevents it from becoming too wide on large ones.
Media Queries
Media queries let you apply CSS rules only when certain conditions are met — most commonly when the screen is smaller than a specific width. This is how you change the layout for different devices.
/* Base styles (all screens) */
.nav {
display: flex;
gap: 2rem;
}
/* Screens narrower than 768px (tablets and phones) */
@media (max-width: 768px) {
.nav {
flex-direction: column;
gap: 0.5rem;
}
}
/* Screens narrower than 480px (phones only) */
@media (max-width: 480px) {
.hero h1 {
font-size: 1.8rem; /* smaller heading on small phones */
}
}
/* You can also target minimum widths */
@media (min-width: 1200px) {
.container {
padding: 0 3rem; /* more padding on large screens */
}
}Mobile-First Design
Mobile-first is a design philosophy where you write your base CSS for small screens first, then use min-width media queries to enhance the layout for larger screens. This is the opposite of the traditional desktop-first approach.
/* MOBILE FIRST APPROACH */
/* Base: mobile styles (no media query needed) */
.card-grid {
display: grid;
grid-template-columns: 1fr; /* 1 column on mobile */
gap: 1rem;
}
/* Tablet: 2 columns */
@media (min-width: 640px) {
.card-grid {
grid-template-columns: 1fr 1fr;
}
}
/* Desktop: 3 columns */
@media (min-width: 1024px) {
.card-grid {
grid-template-columns: 1fr 1fr 1fr;
}
}Why mobile-first? It forces you to prioritize essential content. Mobile CSS is simpler, and adding complexity for larger screens is easier than removing complexity for smaller ones. Google also uses mobile-first indexing for SEO.
Responsive Images
Images are the biggest cause of horizontal overflow on mobile. Fix them with one CSS rule:
/* Make ALL images responsive */
img {
max-width: 100%;
height: auto; /* maintains aspect ratio */
display: block;
}
/* Hero/banner images that fill their container */
.hero-image {
width: 100%;
height: 400px;
object-fit: cover; /* crops to fill, no distortion */
object-position: center;
}Common Breakpoints
| Name | Screen Width | Target Devices |
|---|---|---|
| Extra Small | < 480px | Small phones |
| Small | 480px – 640px | Most phones |
| Medium | 640px – 768px | Large phones, small tablets |
| Large | 768px – 1024px | Tablets, small laptops |
| Extra Large | 1024px – 1280px | Laptops, desktops |
| 2XL | > 1280px | Large desktops, TVs |
Don't obsess over exact breakpoints. Let your content tell you when the layout breaks — that is where to add a breakpoint.
Testing Responsiveness
- Chrome DevTools — press F12, click the device icon (Toggle device toolbar) to simulate different screen sizes and devices
- Firefox Responsive Design Mode — similar to Chrome, press Ctrl+Shift+M
- Actual devices — test on a real phone when you can. Emulators are good but not perfect
- Resize your browser — drag the window edge slowly to see how your layout responds at different widths