Simulating Landscape Viewports in Webflow

For modern web developers, ensuring a flawless user experience across all devices is paramount. However, Webflow currently lacks a native solution to simulate a landscape viewport—such as a horizontally rotated smartphone—directly within the Designer. Historically, addressing this required a tedious, iterative workflow: publishing to a staging domain, opening browser developer tools, manually resizing the viewport, and returning to Webflow to blindly apply fixes. This disjointed process heavily disrupts development momentum and prevents real-time layout validation.

This lesson introduces a highly efficient, non-destructive technique to overcome this limitation by building a simulated viewport system directly inside the Designer. By wrapping the page content in a dedicated container and introducing a custom number variable—acting as a "vertical resizer"—developers can programmatically scale the effective canvas height. Through the strategic application of the calc() function, elements utilizing viewport height (VH) units are mapped to this variable, allowing the layout to react dynamically as the artificial viewport shrinks or expands.

By implementing this setup, viewers will achieve a vastly accelerated debugging workflow. The ability to visualize and interact with a confined landscape environment directly on the canvas instantly highlights structural inconsistencies, such as unintended content overflow or the improper use of fixed heights. Ultimately, this masterclass equips developers with a clean, instantly reversible framework to rigorously test and perfect responsive behaviors without ever leaving the Webflow ecosystem.

• Eliminate the Publish-and-Test Loop: Bypass the need to rely on staging domains and external browser tools by constructing a customizable, real-time testing environment natively inside the Webflow Designer.
• Harness Custom Variables: Create a simple number variable (with a value between 0 and 1) to act as a vertical resizer, which seamlessly dictates the simulated height of your custom viewport.
• Map Viewport Units with calc(): Dynamically scale your layout by replacing static VH values with a calc() expression that multiplies the element's original height by the vertical resizer variable.
• Isolate and Debug Overflow: By setting the custom viewport's overflow property to auto, you can effectively clip out-of-bounds elements and enable isolated scrolling, making it incredibly easy to identify underlying responsive flaws.
• Maintain a Non-Destructive Workflow: The entire simulated environment is designed to be fully reversible. Simply restoring the variable to 1 and deleting the outer viewport wrappers will instantly return the project to its standard, production-ready state.

• 09:04 - Adding a new div block to the page and assigning it the class page-wrapper.
• 09:11 - Moving all existing page sections inside the page-wrapper div block.
• 09:25 - Adding another wrapping div block to the page and assigning it the class viewport.
• 09:38 - Setting the height of the viewport element to 100 VH.
• 09:42 - Moving the page-wrapper inside the viewport div block.
• 10:08 - Creating a new variable of type number in the variables panel and naming it vertical resizer.
• 11:05 - Temporarily setting the value of the vertical resizer variable to 0.7 for testing purposes.
• 11:34 - Replacing the viewport element's 100 VH height with a custom expression: calc(vertical resizer * 100 VH).
• 12:22 - Replacing the hero section's static 100 VH height with the newly created calc() expression.
• 12:33 - Applying the calc() expression to an image element and adjusting the multiplier to its original 60 VH value.
• 13:40 - Modifying an existing min() function on the footer image by inserting the variable multiplier directly into the function before the VH value.
• 15:25 - Setting the viewport element's overflow property to auto to clip out-of-bounds content and make the container scrollable.
• 16:30 - Adding a final div block to the page and assigning it the class viewport-wrapper.
• 16:37 - Setting the viewport-wrapper display to flex, direction to vertical, and aligning elements vertically to the center.
• 16:50 - Moving the viewport element inside the viewport-wrapper to perfectly center the simulated layout on the screen.
• 17:16 - Changing the variable value to 0.6 in the variables panel to test a new simulated breakpoint.
• 18:18 - Fixing an identified responsive overflow issue by changing a section's height from a fixed 75 VH to a min-height of 75 VH, and resetting its height to auto.
• 19:08 - Setting the vertical resizer variable to 0.5625 to preview the layout at a strict 16:9 aspect ratio.
• 19:29 - Starting the cleanup process by setting the vertical resizer variable value back to 1.
• 19:35 - Moving the page-wrapper out of the temporary viewport-wrapper.
• 19:40 - Deleting the viewport-wrapper and the viewport elements to completely remove the testing setup.

How to Simulate a Landscape Viewport in Webflow: Step-by-Step Guide

Step 1: Establish the Wrapping Structure (09:04 - 09:42)

• How: Add a new div block to your page and assign it the class page-wrapper, then move all existing page sections inside this div block. Next, add another div block with the class viewport, set its height to 100 VH, and move the page-wrapper inside it.
• Why: This establishes a dedicated parent-child container system. The viewport div will serve as the artificial, controllable screen boundary that confines your actual page content during testing.

Step 2: Create the Vertical Resizer Variable (10:08 - 11:05)

• How: Open the Variables panel and create a new variable of the type "Number." Name it vertical resizer. Temporarily set its value to 0.7.
• Why: This variable acts as the control dial for your custom viewport. By using a decimal value between 0 and 1, you can define a percentage multiplier (e.g., 0.7 equals 70% of the canvas height), allowing you to programmatically scale the viewport up or down.

Step 3: Apply the Viewport Scaling Calculation (11:34)

• How: Select the viewport div block. Click the purple variable icon next to the height property, choose "Custom," and replace 100 VH with the custom expression: calc(vertical resizer * 100 VH).
• Why: This links the physical height of your container to the variable multiplier. Now, whenever the variable changes, the viewport element's height dynamically reacts.

Step 4: Map Internal Viewport Units to the Variable (12:22 - 13:40)

• How: Locate all elements inside your project whose sizes or spacing rely on Viewport Height (VH) units (e.g., a hero section set to 100 VH, an image set to 60 VH, or margins/paddings set to VH). Replace their static values with the same calc() logic, adjusting the base VH to match the original. For example, an image with 60 VH height becomes calc(vertical resizer * 60 VH).
• Why: If you only scale the outer container, internal elements will still attempt to fill the browser's true canvas height. Mapping these elements to your variable ensures everything scales synchronously, creating an accurate simulation.

Step 5: Enable Clipping and Scrolling (15:25)

• How: Select the viewport element and set its overflow property to auto.
• Why: This is the core "power move" that finalizes the simulation. By applying overflow: auto, any content that falls outside the boundaries of your scaled-down container is cleanly clipped, and the container itself becomes scrollable—perfectly mimicking a real browser window.

Step 6: Center the Simulated Viewport on the Canvas (16:30 - 16:50)

• How: Add one final div block to the page, name it viewport-wrapper, and set its height to 100 VH (without variables). Set its display to flex, direction to vertical, and align items vertically to the center. Finally, move the viewport element inside this new wrapper.
• Why: Adding this outer flexbox layer perfectly centers the simulated viewport in the middle of your Designer screen. This isolates your layout from the top and bottom edges of the Webflow UI, making it much cleaner and easier to inspect.

Step 7: Test Aspect Ratios and Debug Layouts (17:16 - 19:08)

• How: Change the vertical resizer variable in your Variables panel to test different screen heights (e.g., 0.6). To test a strict 16:9 aspect ratio, switch to the tablet breakpoint, resize the canvas horizontally to match mobile landscape dimensions, and set the variable to exactly 0.5625.
• Why: This immediately highlights layout flaws, such as static content overflowing into adjacent sections. From here, you can instantly apply fixes, such as converting a fixed height property to a min-height property, and validate the results in real-time.

Step 8: Clean Up the Testing Environment (19:29 - 19:40)

• How: When testing is complete, follow three steps:
  1. Set the vertical resizer variable back to 1.
  2. Drag the page-wrapper completely out of the viewport-wrapper.
  3. Delete both the empty viewport and viewport-wrapper elements.
• Why: Because the system is built entirely on non-destructive variable mappings and wrappers, this quick cleanup safely restores your project to a standard, production-ready state without leaving any lingering development artifacts.

You can simulate a landscape viewport by wrapping your page content in a custom div block with its overflow property set to auto. By linking height properties to a custom number variable (between 0 and 1) using a calc() function, you can dynamically scale the simulated canvas height.

To test VH units natively, replace static VH values with a calc() expression that multiplies the original VH value by a custom number variable, such as calc(variable * 100VH). Adjusting this variable between 0 and 1 scales the elements proportionally, completely bypassing the need to test via staging domains.

Webflow does not currently support native vertical canvas resizing. To work around this, create a parent wrapper, apply overflow: auto to clip out-of-bounds content, and use variable-driven calc() functions to programmatically shrink or expand the layout within that confined space.

To preview a strict 16:9 aspect ratio, switch to the tablet breakpoint and resize the canvas horizontally to match typical mobile landscape dimensions. Then, apply a custom variable multiplier of 0.5625 to your viewport-dependent height properties to instantly enforce the 16:9 proportions.