Start here
Before You Fix It: What This Check Means
Viewport-width behavior affects whether layouts remain usable on narrow screens. In plain terms, this checks whether the page fits inside a phone screen without forced sideways scrolling. Scavo evaluates viewport setup and fixed-width anti-patterns in markup.
Why this matters in practice: operational drift here often causes hard-to-debug regressions across environments.
How to use this result: treat this as directional evidence, not final truth. This result reflects what was observable at scan time and should be verified in your own production context. First, confirm the issue in live output: verify directly in live production output with browser/network tools Then ship one controlled change: Enforce responsive containers (`max-width:100%` patterns). Finally, re-scan the same URL to confirm the result improves.
Background sources
TL;DR: Page content is wider than the mobile viewport, forcing users to scroll horizontally to see everything.
Horizontal scrolling on mobile is one of the strongest negative UX signals. Users expect vertical-only scrolling, and content that overflows the viewport looks broken. Common causes: fixed-width elements, unresponsive images, tables without scroll wrappers, or absolute-positioned elements that extend beyond the screen edge.
What Scavo checks (plain English)
Scavo evaluates viewport setup and fixed-width anti-patterns in markup:
- Presence of viewport meta tag
- Whether viewport content includes
width=device-width - Fixed-width tables (
widthvalues >1000) - Large fixed-width images (
>600pxvia attribute/style) - Fixed-width containers in inline styles (
>1000px)
How Scavo scores this check
Result behavior:
- Warning: viewport meta missing (single baseline issue)
- Pass: no issues detected
- Warning: exactly one detected issue
- Fail: multiple detected issues
- Info: Scavo could not gather enough reliable evidence on this run to score pass/fail confidently.
In your scan report, this appears under What failed / What needs attention / What is working for mobile_viewport_width, followed by Recommended next steps and Technical evidence (for developers) when needed.
- Scan key:
mobile_viewport_width - Category:
TECHNICAL
Why fixing this matters
Horizontal overflow is a high-friction mobile experience. Users must pan and zoom to read or interact, which hurts engagement and conversion.
These regressions often appear when desktop-first components are reused without mobile constraints.
Common reasons this check flags
- Wide fixed tables embedded in content.
- Images set with hard pixel widths but no responsive max-width.
- Desktop containers with large fixed pixel widths.
- Missing viewport tag on one template family.
If you are not technical
- Check if key pages require sideways scrolling on phone.
- Prioritize fixes on nav, pricing, signup, and blog/help templates.
- Ask for responsive image/container standards.
- Re-scan and confirm issue count decreases.
Technical handoff message
Copy and share this with your developer.
Scavo flagged Mobile Viewport Width (mobile_viewport_width). Please remove fixed-width overflow patterns (tables/images/containers), ensure viewport uses width=device-width, and verify no horizontal scroll on key templates.If you are technical
- Enforce responsive containers (
max-width:100%patterns). - Replace fixed-width media with fluid image rules.
- Make table content responsive (wrapping/stacking/scroll container where appropriate).
- Keep viewport meta consistent across all layouts.
- Add visual regression tests for horizontal overflow.
How to verify
- Test pages on small mobile viewport widths.
- Confirm no unintended horizontal scroll.
- Inspect problematic elements for fixed pixel widths.
- Re-run Scavo and verify issue count drops.
What this scan cannot confirm
- It does not run full browser layout simulation for all breakpoints.
- It focuses on detectable markup/style patterns.
- It does not catch every overflow case hidden in external CSS.
Owner checklist
- [ ] Assign owner for responsive layout quality.
- [ ] Add overflow checks to mobile QA process.
- [ ] Standardize fluid image/table/container patterns.
- [ ] Recheck after component or content-embed updates.
FAQ
Are fixed widths always bad?
Not always, but large fixed widths frequently break small viewports if not constrained.
Can tables be mobile-friendly?
Yes, with responsive patterns and careful content strategy.
Why is missing viewport only a warning here?
This check isolates viewport-width overflow risk; viewport correctness is covered in dedicated viewport check too.
What should we fix first?
Viewport baseline first, then largest overflow-causing elements on key pages.
Sources
- MDN: Viewport meta element
- web.dev: Responsive design basics
- W3C Mobile Accessibility guidance
- MDN: Responsive images
Need a responsive overflow QA script/checklist for your core templates? Send support your page inventory.
