Media Queries Test
Check if your website uses responsive CSS media queries for optimal display on all devices.
CSS Media Queries
Media queries are CSS techniques that apply different styles based on device characteristics like screen width, allowing your website to adapt its layout for mobile, tablet, and desktop screens.
"Google uses mobile-first indexing, meaning it primarily uses the mobile version of your site for ranking. Responsive design is not optional."
Media Query Syntax
Understanding the basic syntax of CSS media queries helps you write responsive stylesheets that adapt to any screen size.
- Mobile-first (min-width):
@media (min-width: 768px)— styles apply above 768px. - Desktop-first (max-width):
@media (max-width: 767px)— styles apply below 768px. - Viewport meta tag: Always include
<meta name="viewport">withwidth=device-width.
Viewport Meta Tag
The viewport meta tag tells browsers how to scale your page. Without it, mobile browsers render pages at desktop width and zoom out, making text tiny and unusable.
- Required tag:
<meta name="viewport" content="width=device-width, initial-scale=1"> - Mobile rendering: Without this tag, your responsive CSS media queries won't work properly on mobile devices.
- Responsive images: Combine with
srcsetfor complete image optimization across devices.
How to Use This Tool
Enter any URL and click "Check Responsiveness". The tool analyzes whether the page has the viewport meta tag, counts CSS media queries, identifies breakpoints used, and checks responsive image usage. Results include a detailed overview with detected breakpoints and recommendations.
Frequently Asked Questions
Automate Your SEO
Stop manually checking tags. Let SeoKwik's algorithms do it for you instantly.
Related Tools
Other helpful tools in the SEO Analysis category