Text touching the screen edge? Mobile padding that works

If text touches the edge of a phone screen, the box it sits in has no side padding at that width. Give every text container at least 16px of padding on the left and right (20–24px feels roomier), keep that padding when a section goes full width, and add the iPhone safe-area insets if your viewport tag uses viewport-fit=cover. Here's why, and the CSS and Tailwind patterns that get it right.

Why text near the edge looks broken

Phone screens have rounded corners, cases have raised lips, and thumbs sit on the edges. Text 2px from the edge doesn't read as "minimal", it reads as a bug. The first and last letters of every line get lost in the curve, and the page feels like it was built for a different screen.

That's why doesitfit gives a screen a TIGHT sticker when any visible text sits within 8px of the left or right edge of the screen. (It also fires when text is cut off sideways by its own box, which we'll get to.) 8px is the "this is clearly wrong" line, not the target. Aim for 16px or more.

How much padding: 16–24px

Use 16px on each side as the minimum on phones, 20–24px if the page is text-heavy or you want more air, and more on tablets and laptops. Here's what that leaves for content on real phones:

Don't forget the people who make everything bigger. On a Galaxy S25 set to the largest display size the page is 320px wide, and an iPhone 16 with Display Zoom set to Larger Text is also 320px wide. With 16px each side that leaves 288px, which is still fine. With 48px of padding "because it looked nice on desktop", it's 224px and your headings start breaking one word per line.

Pick one value and use it everywhere, so every section's text starts on the same line. A page where the hero is padded 24px, the features 16px and the footer 20px looks messy even when nothing touches the edge.

Container patterns that work

1. Padding on a centred container

The pattern behind most well-behaved sites:

*, *::before, *::after { box-sizing: border-box; }

.container {
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: 16px;
}

padding-inline sets left and right padding in one go. max-width plus margin-inline: auto centres the content on big screens, and box-sizing: border-box means padding is included in the width instead of added on top of it.

2. Padding that grows with the screen

Want 16px on small phones and more on bigger screens without writing breakpoints? Use clamp():

.container { padding-inline: clamp(16px, 5vw, 32px); }

That's 18px on a 360px phone, about 20px on a 402px iPhone 17 Pro, 22px on a 440px iPhone 17 Pro Max, and it stops growing at 32px from 640px up.

3. The one-liner with min()

.container {
  width: min(100% - 32px, 72rem);
  margin-inline: auto;
}

The container is the full width minus 16px each side, capped at 72rem. The gap here is margin rather than padding, so a background colour on the container won't reach the screen edges. Great for text, not for coloured bands.

4. Tailwind

In Tailwind, px-4 is 16px, px-6 is 24px and px-8 is 32px. The classic container:

<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
  …
</div>

Two traps AI tools fall into all the time:

• Tailwind's container class doesn't add side padding by default. class="container mx-auto" on its own gives you text on the edge on phones. Add px-4.
• Padding only from a breakpoint up. md:px-8 means "32px from 768px wide and up", and zero below that, which is exactly where you needed it. Start with an unprefixed px-4, then add bigger values at breakpoints. More in Tailwind breakpoints on real devices.

Full-bleed sections that forget their padding

The most common way padding goes missing: a full-width coloured band (hero, testimonials, newsletter box, footer) is placed outside the container so its background can reach the edges, and its text goes with it. On a laptop you don't notice, because the text is centred in a narrow column. On a phone it's flush against the glass.

Keep the background on the outer element and the text inside a padded container:

<section class="band">
  <div class="container">
    <h2>What our customers say</h2>
    <p>…</p>
  </div>
</section>

.band { background: #111; color: #fff; padding-block: 48px; }

Also watch out for edge-to-edge images with captions (the image can touch the edges, the caption can't) and horizontal card carousels whose first card starts at 0px instead of lining up with the text above.

Notches and the Dynamic Island in landscape

In portrait, an iPhone's notch or Dynamic Island sits at the top and Safari handles it for you. Turn the phone sideways and it sits on the left or right, right where your text starts.

By default Safari keeps your page out of those areas in landscape and fills the sides with your background colour. But if your viewport tag includes viewport-fit=cover (common in "edge-to-edge" designs and web apps), the page stretches under the notch and keeping text clear becomes your job (WebKit: designing websites for iPhone X):

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

.container {
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

env(safe-area-inset-left) is how much of the left side is covered, and it's 0 in portrait and on phones without a cutout, so max() keeps your normal 16px there (MDN: env()). Chrome on Android reports the same insets for camera cutouts when you use viewport-fit=cover.

To see it, check a notched model like the iPhone 14 or a Dynamic Island model like the iPhone 17 Pro in landscape. In doesitfit, turn on Mockups so you can see the real phone frame and cutout, then press Rotate. The full range is on the iPhone page.

Text cut off by its own box

The other half of TIGHT: text that is partly shown and partly hidden because the box it's in cuts it off sideways. Usual causes:

• white-space: nowrap plus overflow: hidden on a heading, button or badge. The end of the text just disappears on narrow phones.
• text-overflow: ellipsis on things people need to read in full: product names, headings, prices, button labels. "Book a free consultat…" is not a call to action.
• A fixed width on a button or tab (w-32, width: 120px) with a label that's longer in real life, or in another language.

Let text wrap, and let boxes grow with it:

/* Let text wrap instead of cutting it off */
.btn, .card-title, .badge { white-space: normal; }

/* Size boxes by their content, with a minimum if you like */
.btn { width: auto; min-width: 8rem; }

/* If you want a limit, cut at whole lines, not mid-word sideways */
.card-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

Ellipsis is fine for things like file names in a list, as long as the full text is available somewhere, such as on the detail page. Just expect a TIGHT sticker for those, since doesitfit can't tell deliberate from accidental.

Also check fixed heights on cards (h-48, height: 200px) with overflow: hidden. When text wraps onto an extra line on a narrow phone, the last line gets chopped off the bottom. Use min-height instead of height.

A prompt for your AI tool

Paste this into Claude, ChatGPT, Cursor, Lovable, v0 or Bolt, and fill in the brackets with what you saw:

On phones, text on my site touches the left and right edges of the screen [at 360px wide, in the hero and the footer]. Give every section that contains text the same side padding: at least 16px on phones, growing to about 32px on bigger screens (for example padding-inline: clamp(16px, 5vw, 32px), or px-4 sm:px-6 lg:px-8 in Tailwind). Start the padding at the smallest size, not from a breakpoint up. Full-width sections should keep their full-width background but put their text inside a padded container. If the viewport meta tag uses viewport-fit=cover, use max(16px, env(safe-area-inset-left)) and the right-hand equivalent. Also find text cut off by white-space: nowrap, text-overflow: ellipsis or fixed widths and heights, and let it wrap instead. Don't change the desktop layout, and list what you changed.

If the page also scrolls sideways, fix that first: see how to fix horizontal scrolling on mobile. For the rest of the usual suspects, see 10 responsive mistakes in AI-built websites and the step-by-step make your AI website mobile friendly.

The short version

• Under 8px from the edge is broken (doesitfit's TIGHT). 16px each side is the minimum, 20–24px is comfortable.
• Put padding on one container pattern and use it everywhere, starting from the smallest screen: px-4, not just md:px-8.
• Full-bleed sections: background outside, padded container inside.
• Using viewport-fit=cover? Add max(16px, env(safe-area-inset-left)) and check landscape.
• Let text wrap. Save nowrap and ellipsis for things nobody needs to read in full.
• Check the narrow end: 360px Samsung Galaxy phones and the 320px you get when people turn up their display size.