---
title: "Mobile-friendly demos"
slug: "/help/demos/getting-started/mobile-friendly-demos"
last_updated: "2026-02-27T12:38:16Z"
zendesk_id: 43542659413651
zendesk_url: "https://help.walnut.io/hc/en-us/articles/43542659413651-The-Complete-Guide-to-Mobile-Friendly-Demos"
locale: "en-us"
category: "Getting Started"
section: "Walnut Guide Series"
product: "demos"
topic: "getting-started"
displayed_sidebar: "demosSidebar"
sidebar_position: 7
tags: ["template settings","mobile","optimization","optimize","mobile app","ios","android","view on mobile","native mobile app","screen display options","1920","1440x900","1920x1080","1440"]
---

## **Overview**

Delivering a great demo experience on mobile devices requires more than just resizing your screen. Whether you’re capturing a desktop product for mobile viewing, recording directly from a mobile device, or showcasing a native mobile app, optimizing for smaller screens ensures your audience can easily navigate, engage, and understand your content.

This guide walks you through the best practices for preparing demos that look sharp, load quickly, and remain interactive—no matter the viewer’s device.

:::note

👉 New to screen display options? Start with this primer: [**Guide to Screen Display Settings**](https://help.walnut.io/hc/en-us/articles/44315047928083)

:::

---

**In this guide:**

[**⚡ Quick Mobile Optimization (Start Here)**](#h_01KD3DJTXTCWJACXG9X8NH900D)  
Get the smoothest mobile experience in minutes using Walnut’s built-in mobile viewing features.

-   [**Quick Mobile Optimization**](#h_01KD3DJTXTCWJACXG9X8NH900D): Instantly improve existing demos using built-in mobile optimization features — no re-capture required.

**🖥️** [**Adapt Desktop Captures for Mobile Viewing**](#h_01K4195XJ95SHSAYDNDBCHYM3B)

Learn how to make desktop product demos readable, navigable, and effective on smaller screens — without re-capturing unless necessary.

-   [**Optimize New Desktop Captures for Mobile**](#01K418YF9T08YQE8S6XH27RGVN): Learn techniques to optimize new desktop captures for mobile screens.
-   [**Optimize Existing Desktop Captures for Mobile**](#01K3XF2NJZT2B9EYRDKP4N1MDA): Learn how to adapt existing desktop captures for mobile viewing.

**📲** [**Create & Optimize Mobile App Experiences**](#h_01K4197029GR8487HM4M1BZF85)

Showcase mobile experiences that look and behave naturally on phones and tablets.

-   [**Capture Mobile-Responsive Versions of Desktop Apps**](#h_01K2HT81WG1JMWMXWJV0Y37CVD): Capture the mobile-responsive layout of your product to deliver demos that look great and function seamlessly on phones and tablets.
-   [**Showcase Native Mobile Apps (iOS & Android)**](#h_01K2HT8AYSZY594P8WHC2NC746)**:** Use the Screens Library and Custom Elements to create a realistic, interactive flow from screenshots, GIFs, or recordings of your native mobile app.

**✅** [**Validate & Test**](#h_01K4197EBG12Z8KE32QREV3NYA)

Confirm your demos perform as expected before sharing them widely.

-   [**Use the Browser Simulator to Test Mobile Viewing**](#h_01K2HTNKH4AYDG9NS2B66EKSFW): Preview your demo in the browser’s built-in device simulator to ensure it looks and functions correctly across different mobile devices and screen sizes.

---

## ⚡️**Quick Mobile Optimization (Start Here)**

Quick optimization is ideal for **guided demos** and works with **existing desktop captures**, no re-capture required\*. Walnut’s built-in mobile viewing features make it easy to optimize desktop demos for mobile with minimal effort and zero rebuilds.

![](pathname:///images/f16cf2ded4df99b3.png)

**What Happens When Mobile Optimization Is Enabled**

When **Optimize mobile viewing experience** is turned on, Walnut automatically enhances your demo in three key ways:

-   **Mobile-Optimized Screen Display -** Applies a recommended **4:3 ratio** to improve readability and reduce awkward scaling on smaller screens.
-   **Enhanced Guided Demo Experience -** Automatically enables split-screen navigation for guided demos:
    -   **Portrait:** Guide + demo displayed together for step-by-step flow
    -   **Landscape:** Wider side-by-side view for more screen context
-   **Flexible Viewing Options -** Viewers can switch between portrait and landscape depending on what works best for their device.
-   **Seamless Mobile Access (**_**Optional**_**) -** This is a secondary setting, independent of mobile optimization. When enabled, demos can open directly on mobile without showing the “Heads Up!” screen.

![](pathname:///images/2a9b76effde084ea.png)

---

### **Quick Optimization Steps**

1.  Open any template from your **Walnut** **Library**.
2.  Go to **Template Settings → Screen Display.**
3.  Turn the **Optimize mobile viewing experience** setting **ON** (recommended for guided demos).
    
    ![](pathname:///images/483cb7f708b45f91.png)
    
1.  Update existing demos or publish a new one to apply the changes.
2.  [**Test both portrait and landscape views**](#h_01K4197EBG12Z8KE32QREV3NYA) to confirm that transitions look smooth.

**That’s it** — your guided demo is instantly upgraded for mobile viewing!

:::note[⚠️ Screen Transitions Still Feel Off After Quick Optimization?]

*  
If you notice jumps between screens or inconsistent scaling, especially between steps, this usually indicates mixed capture sizes or screens captured with zoom enabled. For the smoothest mobile experience, update or re-capture screens using a single, consistent screen resolution.

-   For the best results, see [**Capturing Best Practices & Pre-Capture Checklist**](/help/demos/getting-started/chrome-extension-tutorial)

:::

---

## **Mobile Demos At a Glance**

**Mobile Demo Methods at a Glance** — compare approaches, inputs, and tools. Click any thumbnail to enlarge.
| Method | Source Material | Tools Used | Example |
| --- | --- | --- | --- |
| Optimize New Desktop Captures for Mobile | Fresh HTML captures of your desktop app (Laptop/Desktop presets) | 
Walnut Extension Laptop Preset Desktop Preset Template Settings

 | 

[![Thumbnail: new desktop capture displayed in mobile view using Proportional Fit](pathname:///images/c54769c33840fe13.png)](#lb-new-desktop)

 |
| Optimize Existing Desktop Captures for Mobile | Legacy HTML captures already in your library | Template Settings | 

[![Thumbnail: existing desktop capture adapted for mobile using Fixed Width](pathname:///images/c54769c33840fe13.png)](#lb-existing-desktop)

 |
| Capture Mobile-Responsive Versions of Desktop Apps | HTML captures of responsive layouts (browser/device presets) | Walnut Extension Mobile PresetTemplate Settings | 

 [![Thumbnail: mobile-responsive desktop layout (example 1)](pathname:///images/f375623024086e2f.png)](#lb-responsive-desktop)[![Thumbnail: mobile-responsive desktop layout (example 2)](pathname:///images/394c3d85b6b33b89.png)](#lb-responsive-desktop)

 |
| Showcase Native Mobile Apps (iOS & Android) | Screenshots, GIFs, or recordings from your native app | Screens Library Custom Elements | 

[![Thumbnail: native mobile app demo (example 1)](pathname:///images/22415cfcc728bcfa.png)](#lb-native-mobile) [![Thumbnail: native mobile app demo (example 2)](pathname:///images/80a4ae482501c188.png)](#lb-native-mobile)

 |

---

[×](#)![Full-size: new desktop capture optimized for mobile using Proportional Fit](pathname:///images/c54769c33840fe13.png)

New desktop capture shown in mobile view (Proportional Fit).

[×](#)![Full-size: existing desktop capture adapted for mobile using Fixed Width](pathname:///images/c54769c33840fe13.png)

Existing desktop capture adapted for mobile (Fixed Width).

[×](#)![Full-size: mobile-responsive desktop layout example 1](pathname:///images/f375623024086e2f.png)![Full-size: mobile-responsive desktop layout example 2](pathname:///images/394c3d85b6b33b89.png)

Mobile-responsive desktop layout (Proportional Fit) — examples 1 & 2.

[×](#)![Full-size: native mobile app demo example 1](pathname:///images/22415cfcc728bcfa.png)![Full-size: native mobile app demo example 2](pathname:///images/80a4ae482501c188.png)

---

## **🖥️ Adapt Desktop Captures**

When you start with a demo captured on a desktop, the default layout often isn’t ideal for smaller screens. In this section, you’ll learn how to adapt those captures so they display clearly, remain easy to navigate, and work seamlessly on mobile devices—without losing important detail or interactivity.

-   [**Optimize New Desktop Captures for Mobile**](#01K418YF9T08YQE8S6XH27RGVN): Learn techniques to optimize new desktop captures for mobile screens.
-   [**Optimize Existing Desktop Captures for Mobile**](#01K3XF2NJZT2B9EYRDKP4N1MDA): Learn how to adapt existing desktop captures for mobile viewing.

---

### Optimize New Desktop Captures for Mobile

This method ensures that when you make **new HTML captures of a desktop application** in Walnut, your demos are already optimized for mobile. By starting with the right **capture** **settings** and applying **responsive** **screen** **displayoptions**, you’ll create demos that scale smoothly across devices—so text stays readable, navigation is intuitive, and UI elements don’t appear distorted on smaller screens.

**Step 1: Capture Your Desktop App with the Walnut Extension**

-   Select the **Laptop** or **Desktop** presets in the [**Walnut Chrome Extension**](/help/demos/getting-started/chrome-extension). These presets are the best option for ensuring desktop apps display well on mobile devices. Capturing at larger resolutions may produce long, narrow screen captures that don’t translate cleanly to smaller screens, making navigation and readability more difficult.
    
    ![Screenshot 2025-08-13 at 9.53.34 AM.png](pathname:///images/b0cfd5d6eab1fb06.png)
    
1.  **Check for consistency:** **ensure all screens are captured at the same resolution.**

-    
    -   Do **not** adjust screen size during capture.
    -   Do **not** capture in full-screen mode.
    -   Avoid mixing different screen sizes, as this can cause jumps or awkward transitions during playback—especially on mobile.

---

**Step 2: Set Screen Display Settings for New Desktop Demos**

1.  Open **Template** **Settings** and select the **Screen** **Display** tab.
2.  Select **Proportional** **Fit** or **Fixed** **Width (1920 or 1440)**.

![proportional fit.png](pathname:///images/4294cde18c1ff194.png)               ![fixed width.png](pathname:///images/75e0c7e82df28f4e.png)

---

**Step 3: Configure Mobile Settings for New Desktop Demos**

For desktop demos, set **View On Mobile → ON** when running guided or hybrid demos. This gives mobile viewers a smoother, split-screen experience. For non-guided demos, keep **View On Mobile → OFF** so viewers are prompted to switch to desktop, where navigation is easier.

**Mobile Settings for Guided or Hybrid Desktop Demos**

For guided or hybrid desktop demos, turn **View On Mobile → ON** to provide a smoother experience for mobile viewers.

![prop fit view on mobile.png](pathname:///images/7a9e38df0e14cbb5.png)

  
**View On Mobile → ON:**

-   Removes **the** **“Heads Up!” prompt** (normally shown on screen widths less than 720px).
-   Enables **split-screen navigation** on mobile for step-by-step guidance. This layout keeps annotations and screens side-by-side, ensuring that annotation text remains readable and does not obscure the captured screens.

![prop fit on.PNG](pathname:///images/c54769c33840fe13.png)

---

**Configure Mobile Settings for Non-Guided Desktop Demos:**

For non-guided desktop demos, we recommend leaving **View On Mobile → OFF**. This prevents a frustrating experience on smaller devices and instead directs viewers to open the demo on desktop, where navigation is easier.

**View On Mobile** → **OFF:**

-   Directs viewers to open the demo on desktop with a **“Heads Up!” prompt** (normally shown **below720px**), where navigation is easier.
-   Non-guided desktop app demos, even with optimized display settings, are often difficult to view on smaller devices.

![IMG\_2302.PNG](pathname:///images/93f38fbe28d6c359.png)

---

**Step 4: Publish & Test Your Demos**

-   Test across multiple devices or [**Use the Browser Simulator to Test Mobile Viewing**](#h_01K2HTNKH4AYDG9NS2B66EKSFW) to confirm readability and usability.               

:::note[Important to Note]

For the best mobile experience, capture using the **Laptop** or **Desktop** presets in the Walnut Extension for all new desktop captures. Larger resolutions (above 1920px) often produce long, narrow captures on mobile, so test both **Proportional** **Fit** and **Fixed** **Width** to see which works best.

Consistency is also key—make sure all screens are captured at the same resolution. Mixing sizes or adjusting the window mid-capture can cause jumps or awkward transitions during playback.

For more details, see:

-   [**Guide to Screen Display Settings**](https://help.walnut.io/hc/en-us/articles/44315047928083)
-   [**Create Demos – Part 1: Chrome Extension Capabilities & Best Practices**](/help/demos/getting-started/chrome-extension-tutorial)

:::

---

### Optimize Existing Desktop Captures for Mobile

Use this method to adapt **existing HTML captures of a desktop application** so they display more effectively across devices. By fine-tuning display settings, adjusting margins, and testing on different screen sizes, you can significantly improve older desktop-focused demos for mobile viewing—without needing to re-capture from scratch.

**Step 1: Check the Original Capture Resolution**

1.  Open an existing template.
2.  In the **Screens** panel, hover over the **Display** **Options** icon in the upper-left corner of the screen thumbnail.
    
    ![Screenshot 2025-09-01 at 8.31.14 AM.png](pathname:///images/f9ec3ce23b7665ae.png)
    
1.  Note the **original** **capturedscreen** **resolution**.
2.  **Check for consistency**: confirm whether all captures share the same resolution, or if some screens have differing dimensions.

---

**Step 2: Update Screen Display Settings**

1.  Open **Template** **Settings** and select the **Screen** **Display** tab.
2.  Apply the following screen display setting depending on your original captured screen resolution:
    -   If the captured width is _1920px or smaller_ → Select **Proportional** **Fit**.
    -   If the captured width is _greater than 1920px_ → Select **Proportional** **Fit** or **Fixed** **Width (1920 or 1440)**.

![proportional fit.png](pathname:///images/4294cde18c1ff194.png)               ![fixed width.png](pathname:///images/75e0c7e82df28f4e.png)

:::note[Important to Note]

If the captured width is greater than 1920px, the mobile view may appear long and narrow. Test both **ProportionalFit** and **Fixed Width** to find the best display for your app.

Also, check whether all captures share the same resolution. Mismatched screen dimensions can cause visible jumps or awkward transitions between screens on mobile. For templates with differing capture sizes, using **Fixed** **Width** or **FixedSize** will provide a more consistent viewing experience.

For more details, see:

-   [**Guide to Screen Display Settings**](https://help.walnut.io/hc/en-us/articles/44315047928083)
-   [**Create Demos – Part 1: Chrome Extension Capabilities & Best Practices**](/help/demos/getting-started/chrome-extension-tutorial)

:::

---

**Step 3: Configure Mobile Settings for Existing Desktop Demos**

For desktop demos, set **View On Mobile → ON** when running guided or hybrid demos. This gives mobile viewers a smoother, split-screen experience. For non-guided demos, keep it **OFF** so viewers are prompted to switch to desktop, where navigation is easier.

**Mobile Settings for Guided or Hybrid Desktop Demos**

For guided or hybrid desktop demos, turn **View On Mobile → ON** to provide a smoother experience for mobile viewers.

![prop fit view on mobile.png](pathname:///images/7a9e38df0e14cbb5.png)

**View On Mobile → ON:**

-   Removes **the** **“Heads Up!” prompt** (normally shown for screen widths less than 720px).
-   Enables **split-screen navigation** on mobile for step-by-step guidance. This layout keeps annotations and screens side-by-side, ensuring that annotation text remains readable and does not obscure the captured screens.

![prop fit on.PNG](pathname:///images/c54769c33840fe13.png)

---

**Mobile Settings for Non-Guided Desktop Demos:**

For non-guided desktop demos, we recommend leaving **View On Mobile → OFF**. This prevents a frustrating experience on smaller devices and instead directs viewers to open the demo on desktop, where navigation is easier.

**View On Mobile** → **OFF:**

-   Directs viewers to open the demo on desktop with a **“Heads Up!” prompt** (normally shown **below720px**), where navigation is easier.
-   Non-guided desktop app demos, even with optimized display settings, are often difficult to view on smaller devices.

![IMG\_2302.PNG](pathname:///images/93f38fbe28d6c359.png)

---

**Step 4: Test and Update Existing Demos**

-   Test across multiple devices or [**Use the Browser Simulator to Test Mobile Viewing**](#h_01K2HTNKH4AYDG9NS2B66EKSFW) to confirm readability and usability.

---

## **📲 Create & Optimize Mobile App Experiences**

-   [**Capture Mobile-Responsive Versions of Desktop Apps**](#h_01K2HT81WG1JMWMXWJV0Y37CVD)**:** Capture the mobile-responsive layout of your product to deliver demos that look great and function seamlessly on phones and tablets.
-   [**Showcase Native Mobile Apps (iOS & Android)**](#h_01K2HT8AYSZY594P8WHC2NC746)**:** Use the Screens Library and Custom Elements to create a realistic, interactive flow from screenshots, GIFs, or recordings of your native mobile app.

---

### Capture Mobile-Responsive Versions of Desktop Apps

Use this method to demo **HTML captures** of your product’s **mobile-responsive desktop layout**. This ensures the demo adjusts naturally to different screen sizes, preserving responsive styling and showcasing how the desktop app performs on smaller devices.

**Step 1: Capture Your Mobile-Responsive Desktop App with the Walnut Extension**

-   Select the **Mobile** preset in the [Walnut Chrome Extension](/help/demos/getting-started/chrome-extension) to capture your mobile-responsive desktop app at mobile resolution (500 x 831px).
    
    ![Screenshot 2025-08-13 at 9.57.00 AM.png](pathname:///images/ce8a501fc40f2b45.png)
    
1.  **Check for consistency:ensure all screens are captured at the same resolution.**
    -   Do **not** adjust screen size during capture.
    -   Do **not** capture in full-screen mode.
    -   Avoid mixing different sizes, as this can cause jumps or awkward transitions during playback—especially on mobile.

---

**Step 2: Set Screen Display Settings for Mobile-Responsive Desktop Demos**

1.  Open **Template** **Settings** and select the **Screen** **Display** tab.
2.  Select **Proportional** **Fit.**

![proportional fit.png](pathname:///images/4294cde18c1ff194.png)               

---

**Step 3: Configure Mobile Settings for Mobile-Responsive Demos**

For mobile-responsive demos, set **View On Mobile → ON** for guided, hybrid, and non-guided demos.

**Mobile Settings for Guided, Hybrid, or Non-Guided Mobile-Responsive Demos**

1.  Turn **View On Mobile → ON** to provide a smoother experience for mobile viewers.

![prop fit view on mobile.png](pathname:///images/7a9e38df0e14cbb5.png)

**View On Mobile → ON:**

-   Removes **the** **“Heads Up!” prompt** (normally shown for screen widths less than 720px).
-   Enables **split-screen navigation** for guided demos. This layout keeps annotations and screens side-by-side, ensuring that annotation text remains readable.

---

_**Mobile-Responsive Examples:**_

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

-   First screenshot: **non-guided mobile-responsive demo** with **View On Mobile → ON.**
-   Second screenshot: **guided mobile-responsive demo** with **View On Mobile → ON.**

![IMG\_2305.PNG](pathname:///images/f375623024086e2f.png)               ![IMG\_2306.PNG](pathname:///images/394c3d85b6b33b89.png)          

---

**Step 4: Publish & Test Your Demos**

-   Test across multiple devices or [**Use the Browser Simulator to Test Mobile Viewing**](#h_01K2HTNKH4AYDG9NS2B66EKSFW) to confirm readability and usability.              

---

### Showcase Native Mobile Apps (iOS & Android)

Use this method to create demos of your **nativemobile** **applications** using static images, design files, or recordings. By importing assets into Walnut and linking them together with the **Screens Library** and **Custom Elements**, you can deliver a realistic, interactive flow that looks and feels like the live app—without requiring a working build. 

**Step 1: Gather Your Assets**

Prepare the visuals you want to use for your demo. Templates from the Screens Library support:

-   Screenshots from your iOS or Android device
-   Screen recordings (MP4, MOV)
-   GIFs showing specific interactions
-   Design mockups (e.g., Figma exports)

**![Screenshot 2025-09-01 at 9.52.44 AM.png](pathname:///images/917e226c56c790f3.png)**

**👉 Recommended asset dimensions: 1179 × 2556px.** Longer images are supported and will be scrollable inside your demo, making it easier to showcase full mobile screens without distortion.

---

**Step 2: Import Your Assets Into Walnut with the Screens Library**  
 

1.  Open an existing template or create a new template.
2.  If using an existing template, expand the **Screens** panel on the left side.
3.  Click the **Add** button at the bottom of the panel, or click the **plus (+) icon** at the top.  
    ![Add Screen button and plus icon in the Screens panel](pathname:///images/b196d62734db8302.png)
1.  If starting from a new template, click **Browse existing demos** when prompted.  
    ![Browse existing demos option in the new template screen](pathname:///images/c41088f2f63c17eb.png)
1.  Click **Add Screen**.
2.  In the **Insert Screens** pop-up, go to the **Screens Library** tab.
3.  Select one or more template screens, then click **Done** to insert them into your template.  
    ![Insert Screens pop-up showing Screens Library tab and Done button](pathname:///images/79fea10d7861a6a6.png)
-   **Select an inserted template screen**, then click on the **placeholder image** within the device.
-   Choose **Change Image**, then upload your asset:
    -   **Image** (PNG, JPG)
    -   **GIF**
    -   **Video** (.MP4)
    -   **Media from a URL**
        
        **![Screenshot 2025-09-01 at 10.04.46 AM.png](pathname:///images/6c1cc7e0312adc05.png)**
        
1.  Create screen links or add annotations to the static screens using the **Custom** **Element** feature.

![Screenshot 2025-09-01 at 9.57.47 AM.png](pathname:///images/d28b170efc6c57b6.png)

:::note[⚠️ Important to Note]

Before you can draw **Custom Elements** on a screen, the display setting must be updated. Change the screen’s display option to either **Proportional Fit** or **Fixed Width** to ensure precision and consistency across browser sizes.

![Screenshot 2025-09-01 at 10.13.36 AM.png](pathname:///images/7455dedf0548b148.png)

:::

---

**Step 3: Configure Mobile Settings for Native Mobile Demos**

We recommend setting **View On Mobile → ON** for guided, hybrid, and non-guided native mobile demos.

**Mobile Settings for Guided, Hybrid, or Non-Guided Native Mobile Demos**

Turn **View On Mobile → ON** to provide a smoother experience for mobile viewers.

![prop fit view on mobile.png](pathname:///images/7a9e38df0e14cbb5.png)

**View On Mobile → ON:**

-   Removes **the** **“Heads Up!” prompt** (normally shown for screen widths less than 720px).
-   Enables **split-screen navigation** for guided demos. This layout keeps annotations and screens side-by-side, ensuring that annotation text remains readable.

---

_**Native Mobile App Examples:**_

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

-   First screenshot: **non-guided demo** with **View On Mobile → ON.**
-   Second screenshot: **guided demo** with **View On Mobile → ON.**

![IMG\_2303.PNG](pathname:///images/22415cfcc728bcfa.png)               ![IMG\_2304.PNG](pathname:///images/80a4ae482501c188.png)

---

**Step 4: Test and Update Existing Demos**

-   Test across multiple devices or [**Use the Browser Simulator to Test Mobile Viewing**](#h_01K2HTNKH4AYDG9NS2B66EKSFW) to confirm readability and usability.

---

## **✅ Validate & Test**

### **Use the Browser Simulator to Test Mobile Viewing**

You can use your browser’s built-in device simulator to preview and test how your demo will look on various mobile devices—without leaving your desktop. This helps you confirm that text remains readable, buttons are tappable, and layouts display correctly before sharing your demo with mobile viewers.

### **To test with the browser simulator:**

1.  **Open your demo** in a Chrome browser tab.
2.  **Open Developer Tools**:
    -   **Option 1 (menu):** Right-click anywhere on the page and select **Inspect**. 
        
        -   **Option 2 (keyboard):**
            -   On Mac: `Command + Option + I`
            -   On Windows: `Ctrl + Shift + I`
        
        **![Screenshot 2025-08-13 at 8.53.05 AM.png](pathname:///images/03f3f23940cb08c5.png)** 
3.  **Toggle Device Toolbar** by clicking the small phone/tablet icon in the top-left corner of DevTools, or press:
    
    -   On Mac: `Command + Shift + M`
    -   On Windows: `Ctrl + Shift + M`
    
    ![Screenshot 2025-08-31 at 8.07.38 PM.png](pathname:///images/cb6e2d7d1e6ba9aa.png) 
4.  In the simulator panel on the left, **select a device preset** from the **Dimensions** dropdown (e.g., _iPhone 14 Pro Max_, _Pixel 7_, _Galaxy S20 Ultra_). ![Screenshot 2025-08-13 at 8.55.43 AM.png](pathname:///images/0c75ab6775afd5f3.png)
5.  **Adjust the zoom level** if needed to see the full layout.
6.  **Test navigation and interactions** just as you would on an actual mobile device.
7.  **Try multiple device sizes** to confirm your demo is mobile-friendly across different screens.

**👑 Pro tip:** Use the **Responsive** option at the top of the list to manually drag the viewport to custom widths and see how the layout adapts.

---

## **FAQs**

---

**Can I Capture From Mobile App Emulators With the Walnut Extension?**

-   No. The Walnut Extension does **not** support HTML capture of native mobile apps or mobile app emulators. If you attempt to capture from an emulator, Walnut may record the **outer emulator window** but the **inner app content will appear blank or as a static image**.

To demo a native mobile app in Walnut, see [**Showcase Native Mobile Apps (iOS & Android)**](#h_01K2HT8AYSZY594P8WHC2NC746).

---