Responsive Design and Media Queries
The viewport meta tag
<meta name="viewport" content="width=device-width, initial-scale=1">Without this single line in your <head>, mobile browsers render your page at a fake desktop-width viewport and then zoom it out to fit — making everything technically visible but tiny and unusable. This tag is not optional for any page meant to work on a phone, and it is the very first thing to check when a page “looks broken on mobile.”
Media queries
.grid {n display: grid;n grid-template-columns: repeat(3, 1fr);n}nn@media (max-width: 768px) {n .grid {n grid-template-columns: 1fr;n }n}A media query applies a block of CSS only when a condition is true — most commonly the viewport width, as above. This exact pattern (three columns on desktop, one column stacked on mobile) is used throughout this site’s own theme.
Mobile-first vs desktop-first
/* mobile-first: base styles ARE the mobile styles */n.grid { grid-template-columns: 1fr; }nn@media (min-width: 768px) {n .grid { grid-template-columns: repeat(3, 1fr); }n}Writing your base (unqualified) CSS for mobile, then using min-width queries to add complexity for larger screens, is generally considered the better default approach — most visitors to most sites are on a phone, and this ordering means a phone never has to download or override desktop-only rules it will never use.
Common breakpoints
There is no single “correct” set of breakpoints — real designs should be tested and adjusted at whatever widths actually break the layout, not just picked from a chart. That said, common starting points are roughly 480px (small phones), 768px (tablets), and 1024px+ (desktop), which is close to what this site’s own theme uses.