Page Information

Feature: Full size rendering stress-test
Focus: Viewport width (vw) dependent heights

Use this page to validate how your renderer behaves when the viewport height is drastically taller than the width. Many landing pages tie their hero height to width for predictable aspect ratios; automated screenshot tools can break that assumption.

Viewport Width Driven Panels

Resize the browser or capture full-page screenshots at different aspect ratios. The blocks below scale their height based only on vw, so the taller your viewport gets, the more vertical real estate they consume.

Promo Hero
Height tracks 40% of the viewport width. At 1440px wide it becomes 576px tall but rapidly shrinks on narrow widths.

Device Mockup
Represents a product hero that expects a balanced aspect ratio. Tall viewports extend the block and can push key CTAs far below the fold.

Immersive Story
Extreme case with height 0.9 x width. Long screenshots with narrow widths result in towering sections that often reveal layout issues.

Viewport Height Responsive Cover

This hero mimics "full bleed" covers that tie their presence to viewport height. Padding, typography, and overlay scale with vh, so tall capture windows exaggerate the navigation band and headline sizing.

Explore the Next Horizon

Journey through panoramic landscapes crafted for full-size captures. As the viewport height grows, the cover stretches, exposing how "vh"-driven spacing can overwhelm above-the-fold layouts in automated screenshots.

Plan An Expedition View Packages

Scroll Activated Content

These gallery cards remain hidden until they enter the viewport. Screenshot tools that render everything at once may miss the reveal; use this to validate lazy rendering of below-the-fold elements.

Itinerary

Golden Hour Summit Trek

Steep switchbacks and horizon firelight make this climb a favourite for testing dynamic overlays that fade in once scrolled into view.

4.8 ★ • 6.5 km loop

Experience

Aurora Lakeside Basecamp

This card demonstrates blurred backgrounds and text blocks appearing with a staggered delay when the observer detects visibility.

5 nights • All gear provided

Forest trail with backpacker crossing a bridge

Field Notes

Mist Trail Recon Mission

Use this entry to confirm that lazy-loaded imagery is captured correctly once the section is scrolled into view by automation.

Guide ratio 1:4 • Intermediate

Snapshot

Compact Metrics Panel

A shorter reveal card that highlights how condensed modules behave when the viewport height balloons during full-page captures.

Ideal width 960px • Tall viewport safe

Module

Fold-Aware CTA Banner

Use this compact height variant to check that scroll-triggered calls to action remain discoverable instead of being lost deep in overly tall screenshots.

CTA density: high • Fade-in 190ms

Checklist

Viewport Readiness Audit

Stacks minimal copy inside a slim reveal block so you can confirm observers only activate once the browser actually scrolls to the content.

3 key steps • Observer gated

Blink

Flash Offer Strip

Ultra-short strip meant to vanish during fast scrolls—use it to confirm your automation pauses long enough for observers to trigger.

Peak height < 160px • Delay 260ms

Ping

Observer Sanity Check

Confirms that micro-height modules still get marked visible; combine with rapid scroll to test for missed triggers.

Observer threshold 0.35 • Watch for skips

Testing Ideas

Compare aspect ratios Try widths 1280 × heights 720 vs 4000. Height grows while width stays fixed, revealing large blank space or repeated backgrounds.

Toggle full size Capture with full_size=false and true to see how the viewport clipping changes vertical rhythm.

Max height limits Set max_height to values like 3000 and 6000 to observe how truncation affects the tallest panel.

Sample API Requests

POST /v1.0/screenshot
{
  "url": "http://localhost:8000/full-size/viewport-panels",
  "width": 1280,
  "height": 720,
  "format": "png"
}

POST /v1.0/screenshot
{
  "url": "http://localhost:8000/full-size/viewport-panels",
  "width": 1280,
  "height": 720,
  "format": "png",
  "full_size": true,
  "max_height": 6000
}

POST /v1.0/screenshot
{
  "url": "http://localhost:8000/full-size/viewport-panels",
  "width": 768,
  "height": 2000,
  "format": "png",
  "full_size": true
}

Web Scraper Test Website

Viewport Width Panels Test