Why Responsive Design?
More than half of all web traffic comes from mobile devices. A page that looks great on a desktop can be unreadable on a phone if it isn't designed responsively. Responsive design means the same HTML works beautifully at any screen size.
The Viewport Meta Tag
Without this tag, mobile browsers zoom out to show the full desktop page in miniature. The viewport meta tag tells the browser to match the screen width:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
This goes in the <head> of every page you create.
Media Queries
A media query applies CSS only when a condition is true — typically a min or max screen width. Mobile-first means you write base styles for small screens, then use min-width breakpoints to enhance for larger screens.
/* Base: mobile single column */
.grid { display: flex; flex-direction: column; }
/* Tablet and up */
@media (min-width: 768px) {
.grid { flex-direction: row; flex-wrap: wrap; }
}
/* Desktop and up */
@media (min-width: 1024px) {
.grid { gap: 24px; }
}