Guides for websites that fit
Plain-English guides to making websites work on every screen: viewports, breakpoints, mobile bugs and how to fix them, and how to get your AI to do it for you.
AI building
- 10 responsive mistakes in AI-built websites (and fixes)AI tools build great desktop pages and wobbly phone ones. The 10 responsive mistakes AI-built websites make most, how to spot each one, and a prompt to fix it.AI building · 8 min read
- Check your website from Claude, ChatGPT or Codex (MCP)Connect doesitfit to Claude, ChatGPT, Codex or Cursor with MCP and ask whether your site fits on an iPhone. Setup for each app, example prompts and the limits.AI building · 7 min read
- Copy-paste prompts to fix responsive design with AICopy-paste prompts to fix responsive design with Claude, ChatGPT, Cursor, Lovable, v0 or Bolt: sideways scroll, menus, tables, 100vh, iPhone form zoom and more.AI building · 9 min read
- Make your AI website mobile friendly (prompts that work)A step-by-step way to make an AI-built website mobile friendly in Claude, ChatGPT, Cursor, Lovable, v0 or Bolt, with copy-paste prompts and real phone widths.AI building · 7 min read
- Vibe coding launch checklist (15 checks before you ship)Built a site with AI? This vibe coding launch checklist covers 15 checks, from mobile fit to exposed secrets, with how to check each one and a prompt to fix it.AI building · 8 min read
Fixes
- 100vh on mobile is broken: use dvh, svh and lvh100vh hides your content behind Safari and Chrome toolbars on phones. Here's why, with real iPhone and Android numbers, and how dvh, svh and lvh fix it.Fixes · 8 min read
- Fixed headers and bottom bars on mobile Safari and ChromeSticky or fixed? How Safari and Chrome toolbars move on phones, keeping bottom bars clear of the home indicator and keyboard, and fixing hidden anchor links.Fixes · 9 min read
- How to fix horizontal scrolling on mobile (12 causes)Page wobbles sideways on phones? The 12 usual causes of horizontal scrolling on mobile, a fix for each, and a console snippet that finds the culprit fast.Fixes · 9 min read
- Landscape on phones: what breaks and how to fix itPhones on their side are wide but short, like 874×402 on an iPhone 17 Pro. See which breakpoints they hit, what breaks in landscape and the CSS that fixes it.Fixes · 8 min read
- Responsive tables on mobile: 5 patterns that workWide tables make the whole page scroll sideways on phones. Five responsive table patterns with code: scroll wrapper, stacked cards, sticky column and more.Fixes · 9 min read
- Stop layout shift on mobile (CLS): images, fonts, embedsPages that jump while loading hit phones hardest. Fix layout shift on mobile (CLS) with sized images, reserved space for embeds and banners, and matched fonts.Fixes · 9 min read
- Text touching the screen edge? Mobile padding that worksText squashed against the edge of a phone screen looks broken. How much mobile padding to use (16–24px), CSS and Tailwind patterns that work, and a fix prompt.Fixes · 7 min read
- The meta viewport tag: the one line every site needsCopy the meta viewport tag every site needs, learn what each part does, where it goes in Next.js, Vite and plain HTML, and which settings to avoid.Fixes · 7 min read
- Why iPhone zooms in on your form (and the 16px fix)iPhone Safari zooms into any form field with text under 16px. Why it happens, the one-line CSS fix, the Tailwind version, and why maximum-scale=1 is wrong.Fixes · 7 min read
- Why your website looks zoomed out on phones (and fixes)Website looks tiny and zoomed out on mobile? It's almost always a missing viewport tag or something wider than the screen. Here's how to find and fix it.Fixes · 7 min read
Guides
- Container queries vs media queries: when to use whichMedia queries react to the screen, container queries to the space a component actually has. Syntax, cqi units, support, Tailwind v4 and a card example.Guides · 9 min read
- Device pixel ratio (DPR) explained, with real devicesDevice pixel ratio is how many screen pixels make one CSS pixel. See the real DPR of iPhones, Galaxies, Pixels and MacBooks, and how to stop blurry images.Guides · 7 min read
- How to open localhost on your phone (Wi-Fi, USB, tunnel)Typing localhost on your phone opens the phone itself. How to reach your dev server over Wi-Fi, USB or a tunnel, and fix the HTTPS features that break on an IP.Guides · 7 min read
- How to test your website on an iPhone from WindowsNo Mac, no Safari for Windows? How to test your website for iPhone from a Windows PC: exact iPhone viewports, free WebKit via Playwright and real devices.Guides · 7 min read
- How to test your website on mobile without a phoneNo phone to hand? Six ways to test your website on mobile from a laptop, from DevTools to real iOS and Android simulators, plus a routine that catches bugs.Guides · 7 min read
- Mobile menus that work: hamburger, tabs and bottom barsWhen your nav stops fitting, pick a mobile menu that works: an accessible hamburger, a bottom tab bar, priority+ or scrolling tabs. Real widths and code.Guides · 9 min read
- Mobile-first CSS: what it means and how to write itMobile-first CSS explained: min-width vs max-width media queries, base styles for 360px phones, converting desktop-first CSS, Tailwind and an AI prompt.Guides · 8 min read
- Responsive breakpoints in 2026 — the widths that matterWhere 123 real phones, tablets, laptops and monitors land in CSS pixels, which responsive breakpoints actually matter in 2026, and which screens to test.Guides · 8 min read
- Responsive font sizes with CSS clamp(), by exampleHow CSS clamp() makes font sizes responsive: a fluid type scale worked out at real phone, iPad and laptop widths, why rem matters for zoom, and Tailwind.Guides · 9 min read
- Responsive images with srcset and sizes, by exampleLearn srcset and sizes with real numbers: how many pixels a hero needs on an iPhone 17 Pro, Galaxy S25 or MacBook Air, plus picture, lazy loading and Next.js.Guides · 8 min read
- Safe areas on iPhone: notch, Dynamic Island and env()What iPhone safe areas are, when Safari handles them for you, and how to use viewport-fit=cover with env(safe-area-inset-*) without breaking layouts.Guides · 8 min read
- Tailwind breakpoints on real devices, from sm to 2xlWhich real phones, tablets, laptops and monitors land in Tailwind's sm, md, lg, xl and 2xl breakpoints, upright and sideways, plus the gotchas that bite.Guides · 8 min read
- What is a viewport? CSS pixels vs screen resolutionA viewport is the area your page is laid out in, measured in CSS pixels, not screen pixels. See real numbers from iPhones and MacBooks, then check yours.Guides · 8 min read
- Why DevTools device mode isn't accurate (and what is)Chrome DevTools device mode gets the width right and much else wrong: no toolbars, stale presets, desktop fonts. What it misses and how to test properly.Guides · 8 min read
- X-Frame-Options and CSP frame-ancestors, explainedWhat X-Frame-Options and CSP frame-ancestors do, which wins, why sites show BLOCKED in previews, and correct configs for Vercel, Netlify, Next.js and Express.Guides · 7 min read
Devices
- How much of the screen iPhone users actually see in SafariThe status bar and Safari take 156px of an iPhone 17 Pro's 874px screen. Visible heights for every current iPhone, and what it means for 100vh and dvh.Devices · 7 min read
- iPhone Duo for web developers: viewport sizes and SafariOn the iPhone Duo's outer screen, web pages get 382px, not 466. Unfolded it's 951 × 669 landscape. Simulator-measured sizes, Safari's layout and what to test.Devices · 6 min read
- MacBook screen resolution vs CSS pixels, every modelA MacBook Air 13 has a 2560×1664 panel but websites see 1470×956. Panel vs CSS sizes for every MacBook, scaling options and real Chrome viewport heights.Devices · 7 min read
- Web design for foldable phones: sizes, folds and tipsFoldables give your site two viewports: a narrow cover screen and a wide inner one. Real sizes for Galaxy Z Fold, Pixel Fold and iPhone Duo, and how to design.Devices · 7 min read
- Windows display scaling and the 1536×864 viewportWhy a 1920×1080 Windows laptop shows websites at 1536x864, what 100%, 125% and 150% scaling do to your viewport, and how much height is left in Chrome.Devices · 7 min read
Data
Does your site fit?
Paste your address (or localhost:3000). doesitfit shows it on real screen sizes at once and tells you, bluntly, where it spills.
Free, no sign-up. Or ask Claude, ChatGPT or Codex to check it.