Intermediate10 min readShare
Was this chapter helpful?
Share
Make your website look great on every screen size — from phones to ultrawide monitors.
Breakpoints are the screen sizes where your layout adapts. Your website layout can change at these common screen sizes:
Design for phones first, then make it look better on bigger screens. This is how professional designers work.
Items stack vertically on mobile, sit side-by-side on larger screens.
Hide an element on mobile, show it on tablet and up.
Show element only on mobile, hide on larger screens.
Text gets larger as the screen grows.
Increase padding on larger screens for better spacing.
1 column on phones, more columns on bigger screens.
Full width on mobile, centered and constrained on desktop.
Increase gaps between items on larger screens.
Links hidden behind a ☰ icon on mobile. The most common pattern. Opens a dropdown or drawer.
"Create a navbar that collapses into a hamburger menu on mobile."
Fixed bar at the bottom on mobile (like phone apps). Usually 4-5 icon tabs.
"Add a mobile bottom tab bar with Home, Search, Create, Profile icons."
Slides in from the left on mobile. Shows full navigation with icons and labels.
"On mobile, turn the sidebar into a slide-in drawer triggered by a hamburger icon."
Press F12 and toggle the device toolbar (Ctrl+Shift+M) to preview any screen size.
Simply drag your browser window narrower or wider to see the layout change in real time.
Test on your actual phone and tablet. Nothing beats real device testing.
A free browser extension that shows your site in multiple screen sizes at the same time.
See how the same content rearranges itself on different screen sizes. On a phone, everything stacks vertically. On desktop, elements spread out.
On phones, the navigation links hide behind a hamburger icon (☰). On desktop, all links are visible in a row.
Cards stack in a single column on phones so they are easy to scroll. On desktop, they sit in a 3-column grid.
On phones, the image stacks above the text. On desktop, text and image sit side by side in a split layout.
These are the standard screen widths where your layout should adapt. Think of them as "checkpoints" where your design shifts to fit the screen.
Percentages are approximate global usage. The exact numbers vary, but the takeaway is: you need to design for all of these sizes, not just desktop.
Most visitors will see your site on a phone first. If it looks great on a small screen, it will look even better when there is more room.
Tip: When you ask your AI tool to build a page, always say "design it mobile-first." This tells the AI to start with the simplest layout and add complexity for bigger screens.
Images that are too wide will break your layout on phones. A responsive image shrinks and grows with its container, so it always fits the screen.
The image is wider than the phone screen, so it overflows and creates a horizontal scrollbar.
The image automatically shrinks to fit the phone screen. No overflow, no scrollbar.
Max width 100% — Tell the image to never be wider than its container. This one rule prevents most overflow issues.
Keep the aspect ratio — When an image shrinks, it should stay in proportion (no stretching or squishing). Modern browsers do this automatically.
Lazy loading — Tell images below the fold (not visible when the page first loads) to load only when the visitor scrolls to them. This makes your page load faster.
Tip: When prompting your AI tool, say "make all images responsive with max-width 100% and lazy loading." That one sentence fixes most image problems.
Phone users tap with their fingers, not a precise mouse pointer. Designing for touch means making buttons big enough to tap comfortably.
A 32px button is too small. Your finger covers the entire button and you might hit the wrong thing.
A 44px button gives your finger enough room. Apple and Google both recommend at least 44px for tap targets.
Bigger tap targets — Buttons, links, and form fields need to be at least 44px tall on mobile. Fingers are much bigger than mouse cursors.
No hover on touch — Phones don't have a hover state. If important info only appears when you hover, phone users will never see it. Use tap or always-visible alternatives.
Swipe gestures — Phone users expect to swipe through image carousels and dismiss things by swiping. If you have a carousel or gallery, make sure it supports swipe.
Spacing between links — Put enough space between tappable items so users don't accidentally tap the wrong one.
You built it, now make sure it looks good everywhere. Here is the quickest way to check.
MAKE A COMPONENT RESPONSIVE
"This component looks good on desktop but breaks on mobile. Make it fully responsive: stack elements vertically on phones, use 2 columns on tablets, and keep the current layout on desktop. Make sure all buttons are at least 44px tall on mobile, images scale properly, and nothing overflows the screen."
Copy-paste these prompts into your AI tool to apply what you just learned.
MAKE MY PAGE RESPONSIVE
"Make my page fully responsive. On mobile, stack everything vertically with full-width sections. On tablet, use a 2-column grid where it makes sense. On desktop, use the full layout with sidebar. Make sure text is readable and buttons are tappable at every size."
FIX BROKEN MOBILE LAYOUT
"My website looks broken on mobile. Fix the layout so all content is readable, buttons are large enough to tap, images scale down properly, and nothing overflows or gets cut off on small screens."
ADD RESPONSIVE NAVIGATION
"Make my navigation responsive. On desktop, show all links in a horizontal row. On mobile, collapse the links into a hamburger menu that opens a dropdown or slide-in drawer. Add smooth transitions when opening and closing."
