SEO check

Media Query

A practical guide to CSS media queries, how our free report decides pass or fail, and how to add responsive breakpoints the right way.

Check my website Jump to the fix

Free to use 1 min read Updated Sep 2026

.

How to Fix

The short version, the same steps you see when you click How to Fix in your report.

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

Re-test my website

See how your site scores right now

Paste your address into the free report, then use the How to Fix button on anything that needs work.

Check my website Browse all SEO checks
Free to use. Results in under a minute for most sites.