CSS Media Queries Must Not Lock Display Orientation
- April 22, 2024
- Accessibility, Mobile and Viewport
Quick Reference
Element Code: AC-026
Issue: CSS locks page to portrait or landscape orientation
Impact: Users who need specific orientations cannot use the page properly
Fix: Remove orientation locks from CSS media queries
Detection: Manual testing, CSS audit
What Is This Issue?
Some users need to view content in specific orientations due to how their device is mounted or their physical limitations. CSS that locks orientation creates barriers for these users.
Why This Matters for Your Website
Users with motor disabilities may have devices mounted in fixed positions. Wheelchair users and others may not be able to rotate their devices.
How to Fix This Issue
- Remove orientation locks: Allow content to work in both orientations
- Use responsive design: Adapt layout to available space instead
- Test both orientations: Ensure usability in portrait and landscape
Tools for Detection
- Manual testing: Rotate device or use DevTools
TL;DR (The Simple Version)
Your CSS is locking the page to one orientation. Remove these restrictions so users can view your content in whatever orientation works for them.
Claude Vincent is a technical SEO consultant focused on crawlability, rendering, and AI-search visibility. He writes the field guides and case studies at SEO ProCheck, with a bias toward the durable, unglamorous work that decides whether search engines and AI answer engines can actually read and cite a site.
About SEO ProCheck
Technical SEO consulting and GEO strategy with 20 years of enterprise experience. Case studies, resources, and tools for search and AI visibility.
Work With Me
Technical SEO audits, GEO strategy, site migrations, and international SEO. Hourly consulting for teams who need hands-on support, not just reports.
Subscribe to our newsletter!
