14-Day Free Trial

Improve and monitor your website's search engine rankings with our supercharged SEO tools. Instantly create competitor analysis, white-label reports and analyze your SEO issues.

Create My Free Account

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.

Check your URL:

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".

View all Free Tools

Analyze and monitor your SEO with our powerful ToolBox.
Create your free account today!

×
By clicking "Sign Up!" I agree to the Terms of Service