Responsive Design
ELI5 — The Vibe Check
Responsive design means your website looks good on EVERY screen size — from a tiny phone to a giant 4K monitor. Instead of building separate sites, you write CSS that adapts and rearranges the layout depending on how wide the screen is.
Real Talk
Responsive design is an approach to web design where layouts fluidly adapt to different viewport sizes using fluid grids, flexible images, and CSS media queries. The goal is a single codebase that provides an optimal viewing experience across all devices from mobile to desktop.
Show Me The Code
/* Desktop: 3 columns. Tablet: 2 columns. Mobile: 1 column */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 768px) {
.grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.grid { grid-template-columns: 1fr; }
}
When You'll Hear This
"Make it responsive — it looks broken on mobile." / "Use Tailwind's responsive prefixes instead of writing media queries by hand."
Related Terms
Breakpoint
A breakpoint is like a 'pause game' button you place on a specific line of code.
CSS Grid
CSS Grid is the two-dimensional layout system — rows AND columns at the same time. Think of it like a spreadsheet you can put your whole website into.
Flexbox
Flexbox is a CSS layout system that makes positioning elements in a row or column stupidly easy.
Media Query
A media query is a CSS if-statement based on screen conditions. 'If the screen is narrower than 768px, apply these styles.
Mobile First
Mobile first means you design for the smallest screen first, then add styles as screens get bigger.
Viewport
The viewport is the visible area of a webpage in the user's browser window. It changes depending on the device — small on a phone, huge on a 4K monitor.