seo site checkup logo
PricingFree ToolsArticles
Log in

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

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 14 Day Trial
© SEO Site Checkup 2009-2021 • All rights reserved