How to Fix a Website Screenshot that Cuts Off the Right Edge in Chrome
Find out whether Chrome captured only the viewport, the page layout overflows, or an automated capture is clipped—and how to fix each case.
If a website screenshot cuts off the right edge in Chrome, first compare the live page with the saved image. If the page itself is clipped, inspect its layout at the current viewport width. If the page looks complete but the image does not, check whether you captured only the viewport or whether an automated tool used a crop rectangle that was too narrow.
For a whole-page image, use Chrome DevTools’ Capture a full size screenshot. For an image of just the currently visible area, use Capture screenshot. These are different capture modes, so choose based on what the screenshot needs to show.
1. Identify where the right edge disappears
- Look at the page in Chrome at the same scroll position and window size used for the screenshot.
- Compare the visible page with the saved image. If both are missing the same content, investigate the page layout and viewport. If the page is intact but the file is cropped, investigate the capture mode and capture bounds.
- Note how the screenshot was made: DevTools, an extension, an operating-system capture, or an automated browser. The next steps depend on that method.
This comparison narrows down the likely area to inspect; without the page, image, and capture settings, it cannot establish the exact cause.
2. Choose the right Chrome DevTools screenshot mode
Open DevTools with F12 or Ctrl+Shift+I on Windows/Linux, or Command+Option+I on macOS. In DevTools, open the More options menu, then choose the capture command that matches your goal:
| Command | What it captures | Use it when |
|---|---|---|
| Capture screenshot | The current viewport | You need the visible screen at the current scroll position. |
| Capture a full size screenshot | The full page, including content outside the viewport | You need a long-page image rather than just the visible screen. |
A viewport screenshot is not meant to include page content outside the visible area. If you need the whole page, switch to full-size capture rather than trying to widen a viewport screenshot after the fact. See Chrome’s Device Mode documentation for the capture commands and viewport controls.
3. Check whether the page is wider than the viewport
A page can use different layouts at different widths. To see how the page responds, turn on the Device Toolbar in DevTools, then choose a responsive viewport and enter a width or drag the viewport handles. You can also enable Show media queries to see breakpoint ranges and compare widths around a breakpoint.
- Record the viewport width at which the edge is missing.
- Compare a slightly wider and narrower width, including widths around any visible media-query breakpoint.
- Watch for a layout change, such as a column moving, a navigation menu collapsing, or a wide element remaining outside the viewport.
- If the problem appears only at certain widths, inspect the CSS that applies at those widths before changing it.
Device Mode is an approximation of mobile behavior, not a real mobile device. If a mobile-only issue has significant consequences, confirm it on actual hardware. Chrome documents both responsive viewport controls and this limitation in its Device Mode guide.
4. Inspect the clipped element and its CSS
If the live page itself loses content at the right edge, use the element picker in DevTools to select the affected content. In the Elements panel, inspect the rules in Styles and the resolved values in Computed. Chrome’s CSS inspection guide explains how to view applied and computed styles.
Check the values relevant to the element’s actual layout:
widthandmax-width: does the element exceed its containing block or viewport?marginandpadding: do offsets or inner spacing push content past the visible edge?overflow: is a parent clipping content withhiddenor another overflow mode?- Positioning and transforms: does the element’s computed position place it beyond its container?
- Active media queries: is a width-specific rule applying a size or position that causes the problem?
Do not apply a generic CSS fix before identifying the element and the rule responsible. A wide layout may be intentional, and clipping may come from a parent rather than the visible child.
5. Check automated screenshot bounds
If a script or browser automation tool made the screenshot, inspect its requested capture area and settings. A capture may be limited to a rectangle that ends before the intended right edge, even when the page renders correctly.
In Chrome DevTools Protocol, Page.captureScreenshot supports a clip rectangle and a captureBeyondViewport option. The viewport description includes the capture rectangle’s x, y, width, height, and scale. Check that the clip’s width and position cover the content you want, and that the beyond-viewport setting suits the capture. Consult the Chrome DevTools Protocol Page reference for the current parameter definitions.
These protocol settings apply to automation and tooling. They are not the controls for a normal manual DevTools capture.
6. Troubleshooting
| Symptom | Likely area to check | Next step |
|---|---|---|
| The saved image ends at the viewport edge, but the page continues below or beyond it. | Capture mode | Use Capture a full size screenshot for the whole page. Use Capture screenshot only when the visible viewport is the intended result. |
| The page itself is missing content on the right. | Responsive layout or CSS | Compare nearby viewport widths, then inspect the affected element and its Styles and Computed values. |
| The page looks complete, but an automated image has a straight crop at the right. | Capture rectangle or tool options | Check the requested clip width and position, viewport dimensions, scale, and beyond-viewport behavior. |
| The problem appears only at one browser width. | Breakpoint-specific styling | Use Device Mode to compare widths around the relevant media query and inspect which rules apply. |
| A mobile layout appears wrong in Device Mode. | Approximation limits | Confirm the behavior on a physical device; Device Mode does not run the page on actual mobile hardware. |
7. Reliability and capture planning
For a repeatable manual capture, keep the viewport dimensions and scroll position consistent, and record whether the intended result is viewport-only or full-page. For automated captures, make the capture rectangle and viewport explicit, and preserve the settings used to produce the image. If a result changes at a responsive breakpoint, capture at the intended width rather than assuming one screenshot represents every layout.
Keep the original screenshot when investigating a crop. It helps distinguish a page-layout problem from a capture-boundary problem without changing the page prematurely.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server for developers. One GET request returns an image or PDF; see the ScreenshotNeo API documentation for request options. For example, this cURL request saves a WebP screenshot of a page:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo accepts cookie and consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each of those steps can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and the response reports the page verdict and billing status in headers. Its MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots.
Sign up free for 1,000 screenshots a month, with no card.
FAQ
Does a full-size screenshot mean the whole website, including other pages?
No. It captures the full page currently open, including content outside the viewport; it does not capture other URLs.
Should I use a wider viewport to include more of the page?
Only if the intended output is a wider viewport. For content below or beyond the visible area of a long page, use full-size capture; for layout problems, inspect the page at the width where the issue occurs.
Can Device Mode prove that a page works on a phone?
No. It approximates mobile behavior. Check consequential mobile-only behavior on an actual device.
