What does responsive design mean and how do I make my site work on mobile?
My site looks fine on my laptop and completely broken on my phone. What's the actual approach to making one layout work everywhere?
13
1 answers364 views1 Answer
Accepted answer
Responsive design means one codebase that adapts its layout to whatever screen it's on, rather than separate mobile and desktop sites. In practice it comes down to four things: a viewport meta tag, flexible units, flexible layout, and media queries.
Start with the one line that fixes half of all 'broken on mobile' problems:
`<meta name="viewport" content="width=device-width, initial-scale=1">` in your `<head>`. Without it, phones pretend to be a 980px-wide desktop and shrink everything, which is exactly the 'tiny unreadable version of the desktop site' effect. Check this before anything else.
Then the four habits:
1. Stop using fixed pixel widths for layout. `width: 1200px` can't fit on a 390px screen. Use percentages, `max-width` (`width: 100%; max-width: 1200px` is the workhorse pattern), and let content flow.
2. Use flexbox and grid for layout, and let them wrap. `display: flex; flex-wrap: wrap` on a row of cards means they reflow to fewer columns automatically. `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` gives you a responsive card grid with no media queries at all — worth learning, it removes a lot of manual work.
3. Add media queries for the points where the layout genuinely stops working, not for specific devices. `@media (max-width: 768px) { ... }` and adjust. Don't chase individual phone models; resize your browser slowly and add a breakpoint wherever it looks wrong.
4. Make images and media flexible: `img { max-width: 100%; height: auto; }` prevents the single most common cause of horizontal scrolling.
Design mobile-first if you can. Write your base CSS for the small screen, then use `min-width` media queries to add complexity for bigger screens. It produces simpler CSS, because adding space is easier than cramming a desktop layout down, and it forces you to decide what actually matters.
The practical checks:
- Use DevTools device toolbar (Ctrl+Shift+M) constantly while building, not at the end.
- Test on a real phone before you call it done — touch targets, font sizes and fixed headers behave differently than the emulator suggests.
- If the page scrolls sideways on mobile, something is too wide: usually a fixed-width element, an unconstrained image, or a long unbroken string of text. Set `* { max-width: 100% }` temporarily to find the culprit.
One easily missed detail: tap targets. Buttons and links need to be around 44px tall to be comfortable with a thumb. A desktop-sized link is technically visible on mobile and practically unusable.
75
Related questions
- How did you land your first developer job?3 answers
- How do I give and receive design feedback without it turning personal?1 answer
- How do I improve slow website loading speed?1 answer
- How important is math for programming and web development?1 answer
- How do I choose a good project idea when I'm learning to code?1 answer
- How do I learn UI/UX design with no art background?2 answers