Free tools Windows power users keep installed
One-click scans. No signup required.
A fixed sidebar overlaps content when the sidebar is removed from normal page flow but the main area is not given space for it. Reserve the sidebar’s width in the layout, keep the sidebar and content in a shared grid or flex arrangement, or deliberately switch to a compact/overlay navigation mode at narrow breakpoints. Then choose a screenshot scope—viewport, full page, element, or clip—that matches what you need. A full-page screenshot changes how much of the page is captured; it does not fix content positioned underneath the sidebar.
Why a fixed sidebar covers the main content
In visual media, position: fixed anchors an element to the viewport and removes it from normal document flow. The remaining layout therefore does not automatically reserve space for the sidebar. If the main content starts at the left edge of the available layout, it can render underneath the fixed sidebar. See MDN’s position reference and guide to in-flow and out-of-flow elements.
As an Amazon Associate I earn from qualifying purchases.
Fix the layout before adjusting screenshot settings. Increasing the capture height or taking a full-page screenshot will not, by itself, move content out from behind the sidebar.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsReserve space for the sidebar in the layout
For a desktop layout, define the sidebar width once and use it both for the layout track and the fixed sidebar. The example below is general CSS guidance, not a tested implementation for a particular application.
#1 Best Overall
- 14" diagonal, 1366x768 resolution, HD BrightView LED, Glossy NON-TOUCH Display
:root {
--sidebar-width: 16rem;
}
.app-shell {
display: grid;
grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}
.sidebar {
position: fixed;
inset: 0 auto 0 0;
width: var(--sidebar-width);
}
.main-content {
grid-column: 2;
min-width: 0;
}The grid track reserves the sidebar’s width even though the fixed sidebar itself is out of flow. minmax(0, 1fr) and min-width: 0 help prevent wide content from forcing the main column beyond its available space.
When fixed positioning is not necessary
If the sidebar does not need to remain visible while the document scrolls, leave it in normal flow. A shared grid or flex layout can then place the sidebar and main content beside each other without a separate fixed-position offset.
Handle narrow screens deliberately
A desktop sidebar width may leave too little room on a phone. At the relevant breakpoint, choose a compact sidebar or an intentional overlay navigation with a control to open and close it. Keep the layout and sidebar widths coordinated when breakpoints change; otherwise, the reserved track and the visible sidebar can diverge.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Check zoom and larger text
Test at the viewport you intend to capture, then check enlarged text or zoom. MDN cautions that fixed or absolutely positioned content should not obscure other content when users zoom. If the sidebar or its labels no longer fit, adjust the breakpoint or navigation mode rather than relying on the screenshot crop to hide the problem.
Choose the right Playwright screenshot scope
Playwright’s page.screenshot() captures the current viewport by default. Its screenshot API also supports full-page capture, screenshots of a locator, and rectangular clips. Use the option that matches the deliverable, not as a substitute for correcting the layout. See Microsoft’s Screenshots guide and screenshot parameters.
Rank #2
- 256 GB SSD of storage.
- Multitasking is easy with 16GB of RAM
- Equipped with a blazing fast Core i5 2.00 GHz processor.
| What you need | Playwright option | What it captures |
|---|---|---|
| What is currently visible | Default page.screenshot() |
The page viewport |
| The scrollable document | fullPage: true |
The full page rather than only the viewport |
| One component, such as the main area | locator(...).screenshot() |
The selected element |
| A known rectangle | clip: { x, y, width, height } |
The specified rectangular region |
Viewport screenshot
await page.screenshot({ path: 'page.png' });Full-page screenshot
await page.screenshot({ path: 'page.png', fullPage: true });Full-page capture changes the capture extent. It does not repair a layout whose content sits beneath a fixed sidebar. Exact fixed-element rasterization can vary by browser and version, so check the target environment when pixel-level behavior matters; the Playwright documentation does not give a universal guarantee for every browser’s rendering of fixed sidebars in full-page captures.
Screenshot of the main-content element
await page.locator('.main-content').screenshot({ path: 'content.png' });This captures the selected element rather than the full page. It is useful when the deliverable is one component, but it will not change the component’s layout or remove an overlap already present inside it.
Clip to a rectangle
await page.screenshot({
path: 'content.png',
clip: { x: 256, y: 0, width: 1024, height: 768 }
});Replace the coordinates and dimensions with the rectangle you want to capture. A clip limits the image area; it does not reflow the page or reserve room for the sidebar.
Choose output scale
Playwright’s screenshot scale option can use css for one output pixel per CSS pixel or device for device-pixel output, which may produce a larger image. Select the scale expected by your test or downstream image workflow; consult the documented screenshot parameters.
Run a complete Playwright capture
Here is a minimal Node.js example for capturing a page after it loads. Install Playwright and its browser before running it. Set PAGE_URL to your application and choose the capture call that matches your output.
Rank #3
- WINDOWS 11 | STABLE PERFORMANCE: Powered by Intel Celeron N4020 processor and Windows 11 system, this laptop delivers stable performance for everyday computing tasks. It supports web browsing, online learning, document editing, email communication, and basic office work with optimized power efficiency, providing a practical and reliable experience for essential daily use for daily use.
- 15.6” FHD IPS DISPLAY: Features a 15.6-inch Full HD IPS display with narrow bezels, offering wider viewing angles and clearer image details compared to standard panels. The improved screen-to-body ratio enhances visual experience for study, reading, document work, and video playback, making it suitable for both productivity and entertainment use.
- 4GB DDR4 + 128GB eMMC STORAGE: Equipped with 4GB DDR4 memory and 128GB eMMC storage for everyday basics such as browsing, documents, email, and online learning platforms. The built-in TF card slot supports storage expansion up to 1TB, giving you more flexibility for files, photos, videos, and daily documents. TF card not included.
- CONNECTIVITY & PORTS: Includes 1× TF card slot, 2× USB 3.2 Gen1 ports, and 2× full-featured Type-C ports (USB 3.2 Gen1). The Type-C ports support data transfer, charging, and video output, enabling flexible connection with external devices such as monitors, storage, and peripherals for daily work and study use.
- LIGHTWEIGHT DESIGN | ONLINE COMMUNICATION: Designed with a slim, portable profile, this laptop is easy to carry for school, commuting, and travel. A built-in 1MP front camera supports online classes, video meetings, remote communication, and everyday conferencing. The 3300mAh battery works with the low-power system design to support practical daily use, while thermal optimization helps maintain quieter operation during extended tasks.
import { chromium } from 'playwright';
const url = process.env.PAGE_URL;
if (!url) throw new Error('Set PAGE_URL to the page you want to capture.');
const browser = await chromium.launch();
try {
const page = await browser.newPage({
viewport: { width: 1280, height: 800 },
deviceScaleFactor: 1
});
await page.goto(url, { waitUntil: 'networkidle' });
// Viewport capture:
await page.screenshot({ path: 'page.png' });
// For a full-page capture instead, use:
// await page.screenshot({ path: 'page-full.png', fullPage: true });
// For the main-content element instead, use:
// await page.locator('.main-content').screenshot({ path: 'content.png' });
} finally {
await browser.close();
}Set a deliberate viewport: changing it can change responsive breakpoints and therefore the sidebar mode. The example uses networkidle as a navigation wait condition; if the application maintains ongoing network activity, use an appropriate page-specific readiness condition instead. For repeatable visual regression work, keep the capture environment consistent. Playwright notes that screenshots can vary with host operating system, browser version, settings, hardware, power state, and headless mode. Its visual comparisons documentation also describes screenshot styling options that can help hide or adjust dynamic elements.
Troubleshoot overlap and unexpected captures
- The sidebar covers the content: the fixed element is out of normal flow. Reserve its width in the page layout or return it to normal flow; verify that both the layout track and sidebar use the same width.
- The overlap appears only at a narrow viewport: the desktop offset or grid track may not match the responsive sidebar width. Use a compact or intentional overlay navigation mode at that breakpoint.
- The sidebar is visible but the page capture is still wrong: check the intended viewport, page zoom, and text size. A clip or full-page option changes the captured region, not the underlying layout.
- A full-page screenshot differs from the viewport screenshot: inspect it in the exact browser and version used for the deliverable. Playwright documents the capture options but does not promise identical fixed-element rasterization across every browser implementation.
- Visual comparisons change between runs or machines: stabilize browser version, operating system, viewport, scale, and dynamic page content. Consider Playwright’s screenshot styling options for elements that vary on each run.
Or skip the browser setup
ScreenshotNeo can capture a page from one GET request. For a quick image capture:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for options. ScreenshotNeo accepts cookie or consent banners as a visitor and removes 60+ known consent platforms, newsletter popups, and chat widgets before capture; each cleanup step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and responses identify the page verdict and billing status in headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents. The free plan includes 1,000 shots per month without a card; paid plans start at $5 for 3,000 shots.
Learn about ScreenshotNeo, or sign up free for 1,000 screenshots a month with no card.
Keep visual regression captures repeatable
Once the layout is correct, fix the capture conditions that can affect comparisons: browser and operating-system environment, browser version, viewport, scale, and dynamic content. Use screenshot styling options where suitable to suppress or adjust elements that change between runs. These controls improve comparison consistency; they do not replace a sound responsive layout.
Recommended Free Tools
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
