How to Fix Screenshot Clipping on Responsive Websites

First determine whether the webpage itself is clipping content or whether the screenshot only captured the visible viewport. If the page is cut off when viewed in a browser at the target width, check the viewport declaration, fixed-width elements, oversized media, and overflow rules. If the page works in the browser but the image ends at the viewport, switch to a full-page capture mode.

This guide walks through that diagnosis, gives responsive HTML and CSS fixes, and shows how to verify the result in Chrome DevTools and Playwright.

1. Identify which kind of clipping you have

“Clipping” can describe two different problems:

• Layout clipping or overflow: Page content extends beyond the screen, is cut off by a container, or needs horizontal scrolling at a narrow width.
• Viewport-only capture: The page is laid out correctly and scrolls normally, but the screenshot includes only the currently visible browser area.

Open the page at the affected width and scroll it in a browser before changing CSS. If the missing content appears as you scroll vertically, the page may be fine and the capture mode may be the issue. If content is inaccessible, overlaps, or requires page-wide horizontal scrolling, investigate the layout.

Quick decision table

What you see	Likely cause	Next step
The screenshot ends at the bottom of the visible browser area, but the page scrolls below it	Viewport screenshot mode	Choose full-page capture
At phone width, text or an image runs off the right side	Fixed width, minimum width, long unbroken content, or missing responsive rules	Find the widest element and adjust its sizing
A whole card, image, or section is cut at a clean edge	An ancestor may clip overflow	Inspect computed overflow on the element and its ancestors
Only an automated visual snapshot is cut off	Capture settings or test-specific CSS may differ from the browser	Compare viewport, full-page mode, and screenshot-tool behavior

2. Reproduce the problem at the target viewport

1. Open the page in Chrome and enable Device Mode in DevTools.
2. Set a viewport close to the affected device width and height.
3. Reload the page at that size and check whether the content is already clipped in the browser.
4. Take a viewport screenshot, then a full-size screenshot. Chrome DevTools has separate commands for these capture modes, so verify which one your workflow uses. Chrome DevTools Device Mode documentation

For ordinary vertically read content, use a 320 CSS pixel wide viewport as a useful narrow-width check. WCAG Reflow describes presentation without two-dimensional scrolling at a width equivalent to 320 CSS pixels, except for content that inherently requires a two-dimensional layout, such as some tables. W3C: Understanding Reflow

Record the actual CSS viewport dimensions. A device’s physical pixel resolution and its CSS viewport width are not necessarily the same, especially with device scaling or browser zoom.

3. Add or correct the viewport declaration

For a responsive page, put this declaration inside the document’s <head>:

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

width=device-width tells the browser to use the device width as the page’s viewport width; initial-scale=1 sets the initial zoom. Without a suitable viewport declaration, some mobile browsers may lay out the page against a wider virtual viewport, often around 980 CSS pixels, so narrow media queries do not activate as expected. Digital.gov: Set your viewport · MDN: CSS viewport

Do not try to repair a missing viewport by shrinking the entire page with a transform or by disabling zoom. Correct the document head, then test at the affected width.

4. Find the element wider than the viewport

When the page itself overflows, identify the element that creates the excess width. In DevTools, inspect the rightmost clipped content and walk up its ancestor chain. Check computed width, min-width, positioning, grid or flex sizing, and overflow. Temporarily outline elements or disable suspicious rules to isolate the source.

This small browser-console snippet lists elements whose right edge extends beyond the viewport. It is a diagnostic aid: transformed elements, intentional overlays, and some nested scrolling regions can produce results that need human inspection.

[...document.querySelectorAll('body *')]
  .map(el => ({
    el,
    rect: el.getBoundingClientRect(),
    style: getComputedStyle(el)
  }))
  .filter(({ rect, style }) =>
    rect.width > 0 &&
    (rect.right > document.documentElement.clientWidth + 1 ||
     rect.left < -1) &&
    style.position !== 'fixed'
  )
  .sort((a, b) => b.rect.right - a.rect.right)
  .map(({ el, rect }) => ({
    tag: el.tagName,
    id: el.id,
    className: typeof el.className === 'string' ? el.className : '',
    left: Math.round(rect.left),
    right: Math.round(rect.right),
    width: Math.round(rect.width)
  }));

Open the listed candidates in the Elements panel and inspect their parents. A child may be wide because its parent has a fixed width, or it may be correctly sized while a different ancestor clips it.

Common sizing causes and repairs

Cause	Safer repair
width: 900px on a content panel	Use a fluid width with a maximum, such as width: 100%; max-width: 56rem, and account for padding with box-sizing.
min-width preserves desktop layout	Remove or lower the minimum at narrow breakpoints, or make the component itself scroll when its content genuinely needs width.
Fixed-position or absolutely positioned content sits outside its parent	Revisit the positioning context and narrow-screen placement; do not assume the document flow will make it fit.
Grid or flex child refuses to shrink	Check intrinsic sizing. A grid track such as minmax(0, 1fr) and a flex/grid child with min-width: 0 can allow text or media to shrink where appropriate.
Long URL, identifier, or code token has no break point	Use a wrapping rule such as overflow-wrap: anywhere on the appropriate text container.

5. Make images and other media fit

A useful baseline for ordinary responsive images is:

img {
  max-width: 100%;
  height: auto;
}

This constrains an image to its containing block while preserving its aspect ratio. W3C Technique C37 describes this approach for fitting images into available layout space. W3C WAI: Technique C37

For video, canvas, and embedded content, constrain the element or wrapper deliberately. For example, a video may need max-width: 100% and height: auto; an iframe may need a responsive wrapper that preserves the intended aspect ratio. Do not blindly apply an image rule to every media type: check the element’s intrinsic dimensions and intended behavior.

If an image appears painted outside its box, inspect both the element and its ancestors, including computed overflow, object-fit, and any sizing rule that overrides the responsive constraint. Browser behavior can depend on the computed styles, so avoid a site-wide overflow override as a first response.

6. Choose overflow behavior that keeps content available

overflow: hidden and overflow: clip can make an oversized child disappear without fixing its dimensions. Use them only when cropping is intentional and the hidden content does not need to be reached. MDN notes that clipped overflow is not accessible by scrolling; scrollable overflow is appropriate when users must reach the content. MDN: CSS overflow

/* A component with content that legitimately needs horizontal room */
.data-table-wrapper {
  max-width: 100%;
  overflow-x: auto;
}

/* Ordinary content should usually wrap instead of creating page-wide scrolling */
.article-copy {
  overflow-wrap: anywhere;
}

Horizontal scrolling may be right for a data table, code viewer, or other two-dimensional content. Keep that scrolling local to the component where possible. Ordinary article text and images should generally reflow instead of forcing the whole page sideways.

7. Verify viewport and full-page screenshot modes

Once the page works in the browser, check whether the capture tool is taking a viewport screenshot or a full-page screenshot. These are different outputs: a viewport capture shows the currently visible browser area; a full-page capture includes content beyond it. Chrome DevTools exposes both options. Chrome DevTools: capture a screenshot

Runnable Playwright example

This Node.js example opens a page at a mobile-sized CSS viewport, saves a viewport image, and saves a full-page image. Install Playwright and its Chromium browser first using the commands in the official setup guide. Replace the example URL with your page.

import { chromium } from 'playwright';

const browser = await chromium.launch({ headless: true });
const page = await browser.newPage({
  viewport: { width: 390, height: 844 },
  deviceScaleFactor: 1
});

try {
  await page.goto('https://example.com', {
    waitUntil: 'networkidle',
    timeout: 60000
  });

  await page.screenshot({ path: 'viewport.png' });
  await page.screenshot({ path: 'full-page.png', fullPage: true });
} finally {
  await browser.close();
}

Playwright installation · Playwright screenshots

If the full-page screenshot still stops early, inspect the page and capture configuration. Check whether the content belongs to a nested scroll container instead of the document, whether content loads only after scrolling, whether a fixed-height ancestor clips it, and whether your screenshot tool has a documented full-page limitation or override. Do not assume a CSS override for one vendor’s snapshot tool applies to another tool.

8. Use this minimal responsive test page

The following standalone example includes the viewport declaration, a fluid content column, a responsive image rule, and a locally scrollable table. Save it as an HTML file and open it in a browser to compare the layout at a narrow width.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Responsive clipping test</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; font: 1rem/1.5 system-ui, sans-serif; }
    main { width: min(100% - 2rem, 56rem); margin-inline: auto; }
    img, video { display: block; max-width: 100%; height: auto; }
    .long-token { overflow-wrap: anywhere; }
    .table-scroll { max-width: 100%; overflow-x: auto; }
    table { border-collapse: collapse; }
    th, td { border: 1px solid #999; padding: .5rem; }
  </style>
</head>
<body>
  <main>
    <h1>Responsive layout check</h1>
    <p class="long-token">A long unbroken identifier can otherwise extend beyond its container: abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqrstuvwxyz</p>
    <img src="https://placehold.co/1200x600" alt="Example wide image">
    <div class="table-scroll">
      <table>
        <tr><th>Column one</th><th>Column two</th><th>Column three</th></tr>
        <tr><td>Scrollable table content</td><td>Value</td><td>Value</td></tr>
      </table>
    </div>
  </main>
</body>
</html>

The placeholder image host is only for this example; use an image you control in a real page. The table is intentionally allowed to scroll inside its wrapper so it does not widen the entire document.

9. Troubleshooting common cases

Symptom	Likely cause	Fix
Everything looks desktop-sized on a phone	Missing or incorrect viewport declaration	Add the recommended viewport meta tag and reload.
The page is wider than the device even though most text wraps	One child sets the document’s scroll width	Use DevTools and the console diagnostic to find the element; correct its width or contain intentional scrolling locally.
An image extends past its column	Fixed image width or conflicting CSS	Apply the responsive image constraint and inspect computed styles and parent width.
Content vanishes exactly at a card or section edge	An ancestor has hidden or clipped overflow	Inspect ancestor overflow and box dimensions; remove clipping if the content should remain available.
A table makes the entire page scroll horizontally	The table’s intrinsic width is widening the page	Place it in a max-width wrapper with horizontal scrolling, or redesign the small-screen presentation.
DevTools image is only the top screen of the page	Viewport capture was selected	Use the full-size screenshot command or your automation tool’s full-page setting.
Full-page automation capture is still incomplete	Nested scrolling, lazy-loaded content, fixed-height clipping, or tool-specific behavior	Scroll the relevant container, wait for content to load, inspect clipping ancestors, and consult that tool’s capture documentation.
Adding overflow-x: hidden appears to fix it	The overflowing child is concealed rather than repaired	Find and fix the wide child. Keep clipping only where a crop is intentional.

10. Performance, reliability, and cost considerations

For page owners, flexible sizing rules are usually preferable to a collection of device-specific fixed widths because they let content adapt across widths. Test the breakpoints and components that actually exist in your layout, including long text, media, tables, and fixed controls. A single viewport check cannot prove that every breakpoint is correct.

For automated capture, full-page screenshots include more content than viewport screenshots and may take longer to render or produce larger files, particularly on long pages. Lazy-loaded images and content that appears after scrolling may not exist yet when capture begins. Wait for the relevant content or scroll it into view before capturing; avoid assuming that a network-idle condition guarantees every lazy element has loaded. Run at consistent viewport dimensions and device scale when comparing snapshots so changes in capture geometry do not look like layout regressions.

Self-hosted browser automation has infrastructure and maintenance costs, including running a browser and managing dependencies. Screenshot API pricing varies by service and configuration; estimate usage from the plan’s included capture volume and the options you need. For reliable diagnosis, keep page repair and capture configuration separate: first confirm the browser layout, then confirm the screenshot mode.

11. Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. One GET request returns an image or PDF. For a full-page responsive check, add full_page=true and set the viewport using the documented parameters. Check the ScreenshotNeo API documentation for current parameter details.

cURL

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://example.com \
  -d full_page=true \
  -o full-page.webp

Python

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={
        "access_key": "YOUR_API_KEY",
        "url": "https://example.com",
        "full_page": "true",
    },
    timeout=90,
)
r.raise_for_status()
with open("full-page.webp", "wb") as f:
    f.write(r.content)

Node.js

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://example.com',
  full_page: 'true'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await import('node:fs/promises').then(({ writeFile }) =>
  writeFile('full-page.webp', Buffer.from(await res.arrayBuffer()))
);

ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before the shot. Bot checks, blank pages, and failed loads are never billed; response headers indicate the page verdict and billing status. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots per month with no card, and paid plans start at $5 for 3,000. Create a free ScreenshotNeo account.

12. Frequently asked questions

Why does my screenshot cut off at the bottom of the browser window?

It may be a viewport screenshot. Use the full-page mode if you need the page beyond the visible area.

Should I add overflow-x: hidden to the body?

Usually not as the first fix. It can hide the overflowing content without making it fit or remain reachable. Find the element causing the excess width.

Is horizontal scrolling ever acceptable?

Yes. It can be appropriate for content whose meaning depends on two dimensions, such as a wide data table. Keep that scrolling within the component where practical.

Does a full-page screenshot fix a broken responsive layout?

No. It changes how much of the document the capture includes. It does not repair a layout that overflows or clips in the browser.