seo site checkup logo
PricingFree ToolsArticles

Media Query Responsive Test

What is it?

Check if your page implements responsive design functionalities using the media query technique. The '@media' rule allows different style rules for screen sizes. Media query techniques allow different presentation and content to be served depending on the output device, helping ensure that your website renders optimally on all devices and platforms.

Pass rate:

  • Top 100 websites: 98%
  • All websites: 97%
Pass rates of Top 100 US websites
2021

99%

2022

100%

2023

98%

100

75

50

25

0

How do I fix it ?

Media queries allow you to style elements for specific devices (smartphones, tablets, desktop computers) by using attributes like width, height, resolution, aspect ratio, orientation or color. By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself.

Example:

<link rel="stylesheet" media="screen and (min-width: 480px) and (max-width: 960px)" 
href="480-960.css" />
 
<!-- OR -->
@media screen and (min-width: 480px) and (max-width: 960px) {
    #header {
        display: none;
    }
}

A @media rule specifies the target media types of a set of statements. In the example above, we are specifying the media type screen. The max-width and min-width features are telling the browser that at any screen size larger than 480px, but smaller than 960px, hide any elements with id="header".

Check your website's SEO for free right now!

seo site checkup logo
Website SEO, Monitoring & Automation Made Easy.
Product
  • Pricing
  • Free Tools
  • Articles
  • Login
  • Free 7-Day Trial
© SEO Site Checkup 2020-2024 • All rights reserved