Test Landscape Viewports in the Webflow Designer

By the end of this lesson you’ll be able to simulate a landscape viewport — the short, wide shape you get when a phone is rotated — directly inside the Webflow Designer, with nothing more than a couple of elements and one variable. No publishing, no dev tools, no repeating the loop over and over.

The pain is real: Webflow gives you a handle to resize the canvas width, but nothing for its height. So testing a proper landscape breakpoint normally means publish to staging, open Chrome dev tools, switch to responsive mode, guess at fixes, go back to the Designer, publish again — round and round. What we want instead is to build our own adjustable “viewport” right on the canvas.

That’s exactly what this little system does — and the whole thing is reversible in three steps when you’re done.

How it works

The idea is to build a fake viewport: a container with an adjustable height that hosts your page. Any element sized in viewport-height units (vh) will then scale to that container’s height instead of the real screen’s — so shrinking it simulates a shorter viewport.

It comes together with one number variable and a calc(). Create a number variable — call it vertical-resizer — and keep its value between 0 and 1. A value of 1 is the normal full canvas height; 0.7 is a viewport 70% as tall; 0.5625 (that’s 9 ÷ 16) gives you a perfect 16:9. Then wrap your page content in a div (the viewport) and set its height to:

height: calc(var(--vertical-resizer) * 100vh);

With the variable at 0.7, that resolves to 70vh. The power move is setting the viewport’s overflow to auto, which clips and makes the fake viewport scrollable — so you can keep inspecting and editing while previewing a shorter screen.

The last piece is consistency: remap every VH-based property to multiply by the same variable. A hero at 100vh becomes calc(var(--vertical-resizer) * 100vh); an image at 60vh becomes calc(var(--vertical-resizer) * 60vh); a min(300px, 40vh) becomes min(300px, calc(var(--vertical-resizer) * 40vh)). Now every height-dependent element scales together, and the page genuinely behaves as if the viewport were shorter.

Two honest notes. In a real project you don’t do this retroactively — you write the variable in from the start and keep it at 1, where it behaves as if it weren’t there, then drop it below 1 only while testing. And this demo leans on vh heavily on purpose; most projects use it far less, so the technique integrates more smoothly than the walkthrough suggests. A nice side effect: because content that doesn’t scale with height will overflow when you shrink the viewport, this setup also exposes responsive bugs — the classic fix being to swap a rigid height: 75vh for min-height: 75vh; height: auto.

How to use it

1. Wrap your page — put all your sections inside a page-wrapper div (a good standard pattern anyway).
2. Add the viewport — wrap page-wrapper in a viewport div.
3. Create the variable — a number variable named vertical-resizer, kept between 0 and 1. Set it to 0.7 temporarily to see the effect.
4. Set the viewport height — give the viewport div height: calc(var(--vertical-resizer) * 100vh) and overflow: auto.
5. Remap your VH values — go through every property that uses vh (hero height, image heights, offsets, vertical padding…) and multiply each by the variable via calc().
6. Center it (optional) — add a viewport-wrapper (flex, vertical, centered, 100vh), move the viewport inside, and add top/bottom borders so its edges are visible.
7. Test any ratio — change the variable (e.g. 0.5625 for 16:9) and, for landscape phones, resize the canvas width on the tablet breakpoint (Webflow’s landscape breakpoint is dated).
8. Remove it in 3 steps — set the variable back to 1, move page-wrapper out of the viewport wrapper, and delete the wrapper. Done.

Clean, reversible, and genuinely practical: a wrapper, a variable, and a few calc() tweaks give you a landscape testing rig that lives right in your normal Webflow workflow.