Guide to Screen Display Settings (Dynamic, Proportional, Fixed Width, Fixed Size, and View On Mobile)

Overview

One layout doesn’t fit all! We’ve built flexible options so your demos always look great—no matter the screen size (or viewport) of a browser or mobile device.

Optimizing the viewing experience is key to creating great demos. The way your demo appears on a viewer’s screen depends on the Screen Display settings in Template Settings > Screen Display. These settings control whether your demo adapts to different devices, locks to fixed dimensions, or adds margins for consistency.

You have four main display modes plus two additional settings to fine-tune the experience.

• • Dynamic Size (Default)
  • Proportional Fit
  • Fixed Width
  • Fixed Size

Additional Settings:

• • View On Mobile
  • Margin Color

---

Screen Display Options – At a Glance

Display Option	Screen Margin	Content/Annotations Cut-Off	View on Mobile Supported	Pros	Trade-offs	Best For
Dynamic Size (Default)	No	Yes	❌ Not Supported	No screen margin; screens adapt naturally to browser/device size (with CSS-based styling).	Layout may shift by device; UI elements or annotations can be clipped.	Controlled environments or live demos where device size is known.
Proportional Fit (Recommended)	Yes*	No	✅ Supported	Entire screen width always visible; prevents cut-off of content/annotations; UI elements appear proportionally.	Margins may be large or distracting with extreme screen sizes.	Walnut best practice. Ideal for variable/unknown device sizes.
Fixed Width	No	No	✅ Supported	Standardizes demo width and fills device screen; useful for embedded demos.	May zoom or shrink UI elements and text depending on device size.	Embedded demos, kiosks, or presentations where width should stay consistent and margins are minimized.
Fixed Size	Yes*	No	✅ Supported	Locks both width & height for consistent sizing; reduces margin inconsistencies.	Margins may be large or distracting with extreme screen sizes.	Controlled setups (kiosks, presentations) where both width & height need standardization.

* Screen margins are visible when the viewer’s device size differs from the captured/set resolution.

---

Screen Display Options

Dynamic Size (Default)

With Dynamic Size, your demo screens adapt automatically to the viewer’s browser or device. This mirrors how the captured platform itself would behave. Content fills the screen edge to edge—without adding margins or frames.

Dynamic Size Behavior:

• If the captured platform is fully responsive (via CSS), the extension captures that styling and content will reflow naturally as the screen size changes.
• If the platform is not responsive—or if layout changes rely on JavaScript (stripped during capture)—UI elements, content, or annotations may be cut off on smaller devices or narrow browser windows.

Margins/Frame?

• No. Content fills the entire screen and does not add a screen margin or frame.

Best For:

• Live demos and other controlled environments where the device size is known.

Not Recommended for:

• Any situation where the viewer’s device size is variable or unknown—for example, mobile demos, leave-behinds, or embedded demos.

---

Example Demo: Dynamic Size

This example shows a demo displayed on an iPhone 16 Pro Max with the following settings:

• Screen Display Setting: Dynamic Size
• Original Capture Resolution: Laptop Preset (1440 × 721 px)
• Device Size: 2868 × 1320 px
• View on Mobile: OFF

Note: This example demo features captures of the Walnut homepage, which is fully CSS responsive.

---

Proportional Fit (Recommended)

The Proportional Fit setting keeps your demo screens looking proportional on any device. Screens scale larger or smaller while preserving the original aspect ratio, ensuring UI elements never appear stretched or distorted. A margin is added when device size doesn’t match the capture resolution.

Proportional Fit Behavior:

• Screens automatically scale to larger or smaller devices while maintaining a consistent aspect ratio. UI elements appear proportional and never appear stretched or zoomed.
• A margin/frame is added around the screen whenever the viewer’s device size differs from the captured resolution.

Margins/Frame?

• Yes ✔️. Screen margins are visible when the viewer’s device size differs from the original captured resolution.

Best For:

• Most demos—balancing consistency and flexibility across desktop, tablet, and mobile. This is the Walnut-recommended best practice, ideal for variable or unknown device sizes.

Not Recommended For:

• Templates or demos with screens of differing dimensions (height or width), or captures with an original resolution width greater than 1920 px. See Smart Display Settings: Best Practices.

---

Example Demo: Proportional Fit

This example shows a demo displayed on an iPhone 16 Pro Max with the following settings:

• Screen Display Setting: Proportional Fit
• Original Capture Resolution: Laptop Preset (1440 × 721 px)
• Device Size: 2868 × 1320 px
• View On Mobile:
  • First Screenshot: OFF
  • Second Screenshot: ON

              

---

Fixed Width

Fixed Width locks your captured screens to a chosen width (for example, 1920 px). The demo then scales from this baseline so the layout always looks the way it did at that width, regardless of device. UI and text are scaled up or down to fill the viewer’s screen—no margins required.

 

Fixed Width Behavior:

• Locked baseline: The screen always displays at the chosen width (e.g., 1920 px). This acts as the maximum content width, a baseline view of the captured platform.
• Automatic scaling: Content, including text, UI elements, and images, is scaled up or down from the baseline to fill the viewer’s device screen.
• Consistent layout: Viewers always see how the layout appears at the locked width, though scaling may cause UI elements or text to look larger or smaller depending on the device.

Margins/Frame?

• No. Screen content is scaled up or down to fully fill the device screen, which may enlarge or shrink text and UI elements.

Best For:

• Embedded demos where the viewer’s device size may vary, but you want the demo screens to always render at a locked width.
• Showcasing layouts at a specific resolution.

Not Recommended For:

• Demos where the viewer’s device size is unknown. Scaling can make UI elements or text appear disproportionately large or small, and certain elements may look out of proportion. Always test across devices to confirm readability and layout.

---

Example Demo: Fixed Width

This example shows a demo displayed on an iPhone 16 Pro Max with the following settings:

• Screen Display Setting: Fixed Width
• Original Capture Resolution: Laptop Preset (1440 × 721 px)
• Device Size: 2868 × 1320 px
• View On Mobile Setting:
  • First Screenshot: OFF
  • Second Screenshot: ON

              

---

Fixed Size

The Fixed Size setting locks both the width and height of your demo to exact dimensions (for example, 1920 × 848 px). Like Proportional Fit, screens scale proportionally across devices so the original aspect ratio is preserved—UI elements never appear stretched or distorted.

Think of the chosen width and height as the maximum display size. On larger devices, the demo will never exceed that locked resolution, and on smaller devices, it will scale down proportionally to fit.

Fixed Size Behavior:

• Locked dimensions: The screen always displays at the chosen width and height (e.g., 1920 × 848 px).
• Proportional scaling: Content is scaled up or down while preserving aspect ratio (like Proportional Fit).
• Maximum size: The chosen dimensions act as the ceiling; demos won’t scale larger than this baseline.

Margins/Frame: 

• Yes ✔️. If the viewer’s device doesn’t match the locked resolution, margins appear around the screen.

Best For:

• Controlled environments like training rooms, kiosks, or presentations.
• Standardizing existing captures where captured resolutions differ.
• Demos where you want to cap the screen size at a specific maximum resolution, ensuring the layout never scales larger than intended.

Not Recommended For:

• General distribution where viewers use a wide variety of devices, since the locked maximum size may create large margins on smaller screens.
• Embedded demos or mobile-first experiences, where scaling down from the fixed maximum size can make UI elements or text appear too small.

---

Example Demo: Fixed Size

This example shows a demo displayed on an iPhone 16 Pro Max with the following settings:

• Screen Display Setting: Fixed Size at 1920 x 848 px
• Original Capture Resolution: Laptop Preset (1440 × 721 PX)
• Device Size: 2868 × 1320 px
• View On Mobile Setting:
  • First Screenshot: OFF
  • Second Screenshot: ON

              

---

View On Mobile

The View On Mobile setting controls how demos are displayed on mobile devices when Proportional Fit, Fixed Size, or Fixed Width screen display options are used. The View On Mobile setting is not available for Dynamic Size.

---

---

View On Mobile features:

• Split-Screen Layout for Guided Demos: When enabled, mobile devices display the demo in a split view—half the screen shows the demo screens, and the other half shows annotations or guidance text. This ensures annotations remain readable without covering the demo itself.
• Removes “Best Viewed on Desktop” Warning: Normally, when a demo is loaded on a screen width under 720px, viewers see a warning message that the demo works best on desktop.

*This message is removed when the View On Mobile setting is toggled ON.

---

View On Mobile Examples:

This example shows a guided demo with the Proportional Fit setting displayed on an iPhone 16 Pro Max (6.9″, 2868 × 1320 px).

• First Screenshot: Demo with View On Mobile → ON (split screen: half demo, half annotation).
• Second Screenshot: Demo with View On Mobile → OFF (demo screen centered, annotations overlaid).

              

---

Margin Color

The Margin Color setting defines the background color that appears around your demo screens when the viewer’s device resolution does not match the captured or locked screen size.

👑 Pro Tip: Choose a color that matches your brand or the background of your demo for the most seamless viewing experience.

---

Optimize Your Display Settings: Best Practices 🌟

For the best viewing experience, we recommend using Proportional Fit as your default display mode—it works well for most demos. Capture all screens at a consistent resolution (ideally 1920 × 1080 px or smaller), and use the Laptop or Desktop extension presets when possible to keep dimensions standardized across your team. Stick with neutral margin colors that align with your branding, and always test your demo on multiple devices.

General Recommendations:

• • Use Laptop or Desktop presets for all desktop app captures.

  • Set Proportional Fit as your default screen display setting.

  • Turn View On Mobile → ON for guided and hybrid demos to improve readability.

  • Turn View On Mobile → OFF for non-guided desktop demos, where desktop viewing is smoother.

  • Choose a neutral margin color that aligns with your brand or app background.

---

Below are some additional best practices to keep in mind when setting up your display:

Screen Display Settings

• Maintain Consistency Across Screens: Always capture screens at the same resolution (height × width). Mixing dimensions may cause visible shifts or “choppy” transitions with Proportional Fit.
• Capture at Recommended Resolutions: Capture screens at 1920 × 1080 px or smaller. Larger captures can look stretched or thin with some display settings, and small UI elements or text may become hard to read on smaller devices.
• Use Extension Presets When Possible: Laptop and Desktop presets help standardize capture dimensions across assets and teams, reducing margin inconsistencies across devices.
• Test on Multiple Devices: Preview your demo on desktop, tablet, and mobile to confirm margins, scaling, and readability.

Margin Color

• Choose Neutral Colors: Dark grays or brand-neutral tones minimize distraction when margins appear around the demo.
• Align with Branding: When demos are embedded on external sites, match the margin color with the background of the page for a seamless look.
• Avoid High-Contrast Colors: Bright or saturated colors in margins can make demos look cropped or mismatched.

View On Mobile Setting

• Enable for Guided Demos: Guided demos usually work better on mobile with this setting enabled, since the annotation/screen split improves legibility. If left off, annotations may appear oversized or overlap screen content.
• Disable for Highly Visual Templates: If the demo relies on large visuals or detailed layouts and does not have supporting annotations, it may be better to keep View On Mobile off and guide viewers toward desktop instead.
• Test Both ON and OFF: Compare both settings on an actual mobile device. The choice can significantly change viewer experience.

---