Elementor
V
Viewport
Definition
The viewport is the visible area of a web page inside the device's screen — the frame your layout has to work within.
In plain English
A phone is not a small desktop. Its viewport is roughly 390 points wide in portrait, with a browser bar eating the top.
Responsive design means writing rules that respond to viewport size: at this width stack the columns, below that hide the sidebar. The viewport meta tag is what tells a phone to use its real width instead of pretending to be a desktop and zooming out.
Why it matters
Most of your visitors are on a phone. If your layout is designed at 1440 pixels and merely checked on mobile at the end, mobile is where it will feel worst — and mobile is where the traffic is.
Designing with the viewport in mind from the first screen prevents almost all of it.
How it works
- Include the viewport meta tagWithout it, phones render a zoomed-out desktop page.
- Design in ranges, not devicesSet breakpoints where your content breaks, not at “iPhone 14”.
- Use relative unitsPercentages, rem, clamp() and vw scale. Fixed pixel widths break.
- Test at real widthsIncluding 320px, and including landscape.
Let clamp() do the scaling
Use Elementor's per-breakpoint overrides for layout changes — stacking, hiding, reordering. Resist re-typing every font size per device; one clamp() value handles smooth scaling.
Watch it in a real build
Related terms
Tip: use ← and → to move between entries.
The Friday email
One email a week. The thing I'd tell you over coffee.
What changed in WordPress and AI that week, what I'd actually use, and what I'd ignore. Written by me, not summarised by a tool.
- New tutorials the moment they're published
- Honest verdicts on tools — including the ones I dropped
- No sequences, no upsells, one click to leave
Free, forever, no signup
Pick a starting point. Have something real by tonight.
Every tutorial is free, complete, and built in real time — including the bits that break. Start where you are, not where a course thinks you should be.