How to Capture a Responsive Website at Multiple Viewport Widths with Screenshot.rocks

To capture a responsive website at several exact viewport widths, use Chrome or Edge DevTools device mode: enter a width and height, reload if the layout has not adapted, capture the viewport or full page, then repeat at each width. Screenshot.rocks is useful for turning captures into framed, styled mockups, but its documented online URL capture offers desktop and mobile presets rather than an arbitrary custom-width field.

What Screenshot.rocks can and cannot capture

Screenshot.rocks combines website screenshot capture with mockup styling: you can put a capture in a browser or iPhone frame, choose a background, annotate it, and export it. Its online URL capture documents desktop and mobile presets. The documentation does not describe entering an arbitrary viewport width in that flow, and online URL capture returns the first screen rather than a full scrolling page.

Method	Viewport widths	Full page	Best fit
Screenshot.rocks online URL capture	Documented desktop and mobile presets	No; first screen	Quick preset capture and framed mockups
Chrome or Edge DevTools	Preset or custom dimensions	Yes, with full-size capture	Exact widths, long pages, local or authenticated pages

The documented Screenshot.rocks desktop preset is 1440 × 800 points at 2× density, producing a 2880 × 1600 pixel image. Its mobile preset is 375 × 812 points at 3× density, producing 1125 × 2436 pixels. These are preset settings, not universal responsive breakpoints. Choose widths based on the layouts you need to compare or your own design’s breakpoints. See the vendor’s homepage and website screenshot guide.

Capture a site at custom widths in Chrome or Edge

1. Open the page in Chrome or Edge. For a reliable comparison, use the same browser, page state, zoom, and capture method for every width.
2. Open DevTools with F12, or on Mac press Command + Option + I.
3. Turn on the device toolbar: Ctrl + Shift + M on Windows, or Command + Shift + M on Mac.
4. Choose a device preset or enter the width and height you want. The dimensions here describe the browser viewport in CSS points, not the resulting image’s pixel dimensions.
5. Reload the page after enabling device mode if it still shows a desktop layout. Some sites choose their layout during the initial page load.
6. Open the device toolbar’s three-dot menu. Choose Capture screenshot for the visible viewport or Capture full size screenshot for the scrollable page.
7. Repeat for each width. Give each file a name that includes its width, such as landing-375.png and landing-768.png.
8. Optionally import the resulting images into Screenshot.rocks to add mockup frames, backgrounds, annotations, and export styling.

For sharper captures, the Screenshot.rocks mobile guide suggests setting device pixel ratio to 2 or 3 in browser device mode. Keep the pixel ratio consistent across images if you are comparing them. A higher ratio creates a larger image; it does not change the CSS viewport width.

Choose the right capture dimensions and page area

Pick widths for the question you are answering

There is no single set of widths that fits every responsive site. Capture the widths relevant to your task: for example, the intended mobile, tablet, and desktop layouts, or widths around a breakpoint you are investigating. If a layout changes abruptly, capture just below and just above the observed transition to make the difference visible. Do not treat Screenshot.rocks’ preset dimensions as standards for responsive design.

Viewport screenshot or full page?

• Visible viewport: use it to compare what a visitor sees immediately, such as navigation, hero content, or above-the-fold spacing.
• Full-size page: use it to inspect the whole scrolling layout, including lower sections and long-page alignment. Full-page captures can produce large files, especially at high device pixel ratios.

Viewport width versus output image pixels

Responsive breakpoints usually respond to CSS viewport dimensions. Device pixel ratio affects the rendered output’s pixel density. A 375-point-wide viewport at 3× density can produce an image 1125 pixels wide, while the page still lays out against a 375-point viewport. Record both values when image dimensions matter to a review.

When to use Firefox or Safari

Firefox Responsive Design Mode and Safari Responsive Design Mode are alternatives for inspecting a site at mobile dimensions. Screenshot.rocks’ mobile guide describes using Firefox’s camera button to save the phone-sized viewport. For Safari, it describes entering Responsive Design Mode and capturing the preview with the system screenshot shortcut. For custom-width full-page capture, the documented route is Chrome or Edge’s device toolbar and its full-size screenshot command.

Pages that need a browser session

Capture in your own browser when the page is behind a login, served from localhost or a staging environment, blocked from automated browsers, or needs a particular interaction state such as an open menu. Screenshot.rocks’ online capture acts as a first-time visitor, so it cannot see a page that requires your session, local addresses such as localhost, or sites that block automated browsers. Browser device mode can capture pages you can open in your browser, including logged-in pages.

Before capturing an interaction state, open it at each viewport and check that the state is actually visible. A menu, consent dialog, or hover state may behave differently at different widths. Keep the state consistent if you are comparing layout rather than interaction behavior.

Or skip the browser setup

For automated captures, ScreenshotNeo is a website screenshot API and MCP server from Yorker Media. One GET request returns an image or PDF, and its parameters include custom viewport dimensions. The API documentation has the available options and configuration details.

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://stripe.com \
  -d viewport_width=375 \
  -d viewport_height=812 \
  -o shot-375.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={
        "access_key": "YOUR_API_KEY",
        "url": "https://stripe.com",
        "viewport_width": 375,
        "viewport_height": 812,
    },
    timeout=90,
)
r.raise_for_status()
with open("shot-375.webp", "wb") as f:
    f.write(r.content)

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

Repeat the request with the next width and height to make a set. The same parameters are shown in cURL, Python, and Node.js so you can use the version that fits your workflow.

• Cookie and consent banners, newsletter popups, and chat widgets are removed before the shot; each cleanup step can be turned off.
• Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing. Responses include X-Page-Verdict and X-Billed headers.
• An MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf.
• 1,000 screenshots a month are free with no card; paid plans start at $5 for 3,000 screenshots.

Create a free ScreenshotNeo account to get 1,000 screenshots a month with no card.

Options for repeatable capture workflows

For one-off comparisons, browser device mode gives direct control over width and page state. For repeated or automated jobs, ScreenshotNeo provides additional capture options, including full-page capture with lazy images loaded, CSS-selector element capture, dark mode, 12 device presets and custom viewports, retina scale, custom CSS and JavaScript, click-before-capture, selector hiding, waits for a selector, delay or network idle, and blocking for ads, trackers, requests, or resource types.

It also supports custom headers, cookies, user agents and Authorization, timezone and geolocation, transparent backgrounds, image resizing, configurable cache TTL, signed links for public image tags, asynchronous jobs with signed webhooks, bulk capture of up to 100 URLs per call, a usage API, an OpenAPI specification, and PDF controls for paper size, margins, landscape, and page ranges. Check the docs for exact parameter names and usage. ScreenshotNeo supports parameter names used by other screenshot APIs to make switching easier.

Performance, reliability, and cost

• Keep comparisons fair: capture the same URL state, viewport height, device pixel ratio, and page area. Dynamic content, personalization, and late-loading assets can otherwise make screenshots differ for reasons unrelated to responsive layout.
• Wait for the page you need: a screenshot taken before fonts, images, or client-rendered content load can look incomplete. In a browser, wait for the relevant content before capturing; automated capture can use an appropriate selector, delay, or network-idle wait.
• Control file size: full-page captures and high pixel ratios increase output dimensions. Use viewport captures when the lower page is not part of the comparison, and choose image resizing or a smaller density when the original resolution is unnecessary.
• Make automated runs easier to audit: save width and height in filenames or capture metadata. For ScreenshotNeo, inspect the page-verdict and billing headers; cache hits and failed or unclean results are not billed under the stated product rules.
• Plan spend by volume: ScreenshotNeo’s free plan includes 1,000 shots per month without a card. Paid monthly plans are Starter $5 for 3,000, Growth $15 for 15,000, Pro $39 for 60,000, Scale $99 for 250,000, and Business $249 for 1,000,000. Yearly billing gives two months free. Every feature is on every plan.

Troubleshooting

Symptom	Likely cause	What to do
The page keeps its desktop layout in device mode	The page selected its layout before device mode was enabled or when it first loaded.	Enable device mode, then reload. Confirm the width shown in the device toolbar.
The saved image dimensions do not match the entered width	Device pixel ratio scales output pixels beyond CSS viewport dimensions.	Distinguish CSS width from image pixel width; keep device pixel ratio fixed for comparisons.
The full-page command is missing or the capture is cut off	The browser menu or page state differs, or the page has content that loads only while scrolling.	Use Chrome or Edge’s device-toolbar three-dot menu and choose Capture full size screenshot. Scroll through the page first if it lazy-loads sections on scroll.
A capture shows a login page or access-denied screen	An online capture is acting as a first-time visitor or the site blocks automated browsers.	Use your own browser session for authenticated, local, staging, or blocked pages.
The Screenshot.rocks mobile result is not the width you need	The online flow documents a mobile preset, not arbitrary width entry.	Use browser device mode for the custom width, then import the saved image into Screenshot.rocks for mockup styling.
An automated screenshot is blank or missing late content	The page did not finish loading, content is delayed, or a bot check interrupted the visit.	Wait for a meaningful selector or network idle, or use a delay where appropriate. Check ScreenshotNeo’s response headers to see the page verdict and billing status.

Frequently asked questions

Can I set a custom width in Screenshot.rocks?

The documented online URL capture offers desktop and mobile presets; it does not document an arbitrary viewport-width field. Use Chrome or Edge device mode for a custom width, then import the capture if you want Screenshot.rocks mockup framing.

How do I take screenshots of a website at different screen sizes?

In Chrome or Edge, enable device mode, enter a width and height, capture, and repeat for each size. Use consistent capture conditions and label files with their widths.

How do I capture a full page on mobile?

In Chrome or Edge device mode, choose Capture full size screenshot from the device toolbar menu. Screenshot.rocks’ online URL capture is documented as a first-screen capture.

Does Screenshot.rocks store the screenshots?

Screenshot.rocks says, “Images are processed in your browser and never stored on our servers.” Its website screenshot guide also says the captured page is returned to the browser and not stored on the server. These are the vendor’s stated claims.