Introduction
The first website I ever built looked great on my laptop and completely broken on my phone. Text overflowing, buttons cut off, images stretched way too big. That's the exact moment "responsive design" stopped being a buzzword and became something I actually had to understand.
Here's the good news: responsive design isn't complicated once you learn a handful of core habits. This article covers exactly those.
Mobile-First: Start Small, Then Grow
The most important mindset shift: design for the smallest screen first, then add complexity as the screen grows — not the other way around.
/* Base styles = mobile */
.container {
display: flex;
flex-direction: column;
}
/* Then adjust for larger screens */
@media (min-width: 768px) {
.container {
flex-direction: row;
}
}
In Tailwind, this is built into the framework by default:
<div class="flex flex-col md:flex-row">
No media query needed — flex-col is the mobile default, md:flex-row overrides it on tablets and up.
Understanding Breakpoints
A breakpoint is a screen width where your layout changes. Tailwind's defaults are a solid starting point for almost any project:
- (none) — Default styles apply to all screen sizes starting from 0px
(Mobile).
- sm: — Applies styles on screens 640px and wider (Large phones).
- md: — Applies styles on screens 768px and wider (Tablets).
- lg: — Applies styles on screens 1024px and wider (Laptops).
- xl: — Applies styles on screens 1280px and wider (Desktops).
You rarely need custom breakpoints — these five cover the vast majority of real devices.
Flexible Units Over Fixed Pixels
Fixed pixel widths break responsive layouts. Use flexible units instead:
- % — relative to the parent container
- rem — relative to the root font size (better than px for text)
- vw / vh — relative to viewport width/height
- fr — flexible fraction, used in CSS Grid
/* Breaks on small screens */
.card { width: 400px; }
/* Adapts to any screen */
.card { width: 100%; max-width: 400px; }
That second version is the pattern to remember: set a max-width for large screens, but let it shrink to 100% on smaller ones.
Responsive Images
Images are the #1 cause of layout breakage for beginners. The fix is almost always this:
img {
max-width: 100%;
height: auto;
}
In Tailwind:
<img src="photo.jpg" class="max-w-full h-auto" />
This ensures an image never overflows its container, regardless of screen size, while keeping its aspect ratio intact.
Testing Your Responsive Design
Don't just resize your browser window manually — use these instead:
- Chrome DevTools Device Mode (Ctrl+Shift+M) — simulates real device sizes, including touch input
- Responsively App — tests multiple device sizes side by side, syncing scroll and clicks (covered in Article 1)
- Actually open the site on your own phone before calling it done — emulators are close, but not perfect
Common Beginner Mistakes
- Designing desktop-first, then trying to "fix" mobile later. Almost always results in more work and more bugs.
- Fixed-width containers. width: 1200px will always cause horizontal scrolling on smaller screens. Use max-width instead.
- Text that's too small on mobile. 16px is a safe minimum for body text — anything smaller strains readability on phones.
- Forgetting touch targets. Buttons and links need enough padding to be tappable with a thumb — 44px height minimum is the common accessibility guideline.
Final Thoughts
Responsive design isn't a separate skill you learn once and forget — it's a habit you build into every single component from day one. Start mobile-first, use flexible units, test on real devices, and most layout bugs simply won't happen in the first place.
Muhammad Farhan is a Frontend Developer specializing in React.js and Tailwind CSS, based in Dera Ismail Khan, Pakistan.
Portfolio: muhammad-farhan-dev.github.io/muhammadfarhan.dev